backdrop-filter

[foolip]

Description

The unprefixed backdrop-filter CSS property, which can be used to apply a filter effect to the underlying elements. The most common effect is probably a blur effect, as in this example from MDN:

According to caniuse.com / MDN, the property was recently shipped in Firefox, and still requires a prefix in Safari.

Rationale

This rationale will be updated when the results of State of CSS 2022 are available.

In State of CSS 2021, backdrop-filter was the 6th most common answer to the free-form question “Are there any CSS features you have difficulties using because of differences between browsers?”

In Chrome’s usage metrics, backdrop-filter is used on ~16% of page views, and recently saw a sharp increase. (Hypothesis: This was caused by Firefox shipping support.)

While the developer need here is likely mostly met by support in Firefox, the proposal is to sort out the remaining few wrinkles so that developers can depend on backdrop-filter without any caveats.

This proposal, if accepted, could perhaps be grouped with other small filter/mask/image-related proposals.

Specification

https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty

Tests

https://wpt.fyi/results/css/filter-effects?label=master&label=experimental&aligned&view=subtest&q=backdrop-filter

[karlcow]

• WebKit bugs
• Gecko
• Blink

[foolip]

Thanks @karlcow! Going through bugs and checking if there are tests seems like a worthwhile exercise.

[foolip]

Adding to the rationale, backdrop-filter was a common responses the State of CSS 2022 question about browser incompatibilities, mentioned in ~3% of responses, see #248.

Representative examples are "Inconsistent backdrop-filter" and "backdrop-filter can be a pain!"

[foolip]

In the MDN short survey on CSS & HTML, "CSS backdrop-filter property" was selected by ~21% of survey takers, putting it in the top third of the 20 options. (There is some uncertainty as with any survey data.)

[nairnandu]

Thank you for proposing backdrop-filter for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. As of today, backdrop-filter is relatively well supported across all browsers. We have had many strong CSS proposals, and making backdrop-filter more interoperable was judged to be a lower priority than other proposals.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.