backdrop-filter

[foolip]

Description

backdrop-filter 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:

Specification

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

Open Issues

https://github.com/w3c/fxtf-drafts/issues?q=is%3Aissue+is%3Aopen+backdrop-filter

I have not checked the severity of any of the open issues.

Tests

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

Current Implementations

• [X] Blink
• [X] Gecko
• [X] WebKit

Standards Positions

No response

Browser bug reports

https://bugs.webkit.org/show_bug.cgi?id=224899

Developer discussions

No response

Polls & Surveys

backdrop-filter has showed up in State of CSS in the past, and again in 2023. It's never the top issue, but keeps making an appearance.

Per https://2023.stateofcss.com/en-US/features/shapes-and-graphics/#backdrop_filter awareness is increasing.

Per https://2023.stateofcss.com/en-US/usage/#css_interoperability_features it's a bigger pain point than color functions and math functions. (Note https://github.com/Devographics/Monorepo/issues/324, this wasn't a freeform question even though the site currently says so.)

Quoting from https://github.com/web-platform-tests/interop/issues/210 about earlier surveys:

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?”

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 https://github.com/web-platform-tests/interop/issues/248.

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

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.)

Existing Usage

https://chromestatus.com/metrics/css/timeline/popularity/508

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

This is a resubmission of https://github.com/web-platform-tests/interop/issues/210 from Interop 2023 planning.

This is one of few properties that still require a prefix, namely -webkit-backdrop-filter.

[thebabydino]

This is often used for glassmorphism effects.

These can get pretty tricky for text/ other non-rectangular shapes (detailed in this article I wrote a couple of years back on getting such an effect for emoji icons).

But even simpler effects using rectangles that maybe have rounded corners can be problematic due to browser bugs/ inconsistencies.

Example 1. Consider this glassmorphic credit card effect.

glass-card.webm

The demo and tutorial in itself are Chrome-centric, but the reality is that this effect doesn't work in Firefox or Safari due to backdrop-filter bugs.

This effect requires a parent card with a front face child and a back face child. The back face child needs to be rotated by .5turn around its y axis and the parent needs to have transform-style: preserve-3d.

But preserve-3d on the parent breaks the backdrop-filter effect in Firefox - bug 1816561.

And while I haven't had time to go into it, setting backdrop-filter on the faces of such an assembly makes the whole thing disappear altogether in Safari (tested via Epiphany).

Here's a simplified test case for the card demo.

Example 2. I recently came across this Dribbble animation.

glass-ani.webm

Took me only a few minutes to get a working version in Chrome and then expanded it into a second version that works without animating custom properties registered via @property in order to extend support.

But both versions set transform-style: preserve-3d on the system parent so that when the two shapes orbiting the glass pass in front of it or behind, they are all in the correct order along the z axis. This means we hit the same bug as before in Firefox.

We can remove this property from the system parent, but this means we lose the out of the box 3D and we have to emulate it by switching z-index values at various points during the animation. Not ideal.

Safari does something even weirder here (tested via Epiphany) - it correctly blurs the shape passing behind the glass, but it also incorrectly creates a glow/ blur around the shape passing in front of the glass.

Example 3. Glassy cubes like in this Dribbble animation or even intersecting ones. This is one experiment I haven't found the time to get too far with.

[flackr]

Would we be able to resolve on the behavior proposed in https://github.com/w3c/fxtf-drafts/issues/374 as well? The current mirror edgemode leads to flickering when backdrop blur content is moving over new colors.

[jgraham]

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

We wanted to let you know that this proposal was not selected to be part of Interop this year.

We did not have consensus to include this proposal. This should not be taken as a comment on the technology as a whole

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

Posted on behalf of the Interop team.