For all that are hoping that this feature gets implemented soon (like me), backdrop-filter is listed in the priorities for 2019, see https://wiki.mozilla.org/CSS#Filter_Effects_Level_2.

Sebastian

Today's Blink intend to ship:
https://groups.google.com/a/chromium.org/forum/m/#!topic/blink-dev/GRl1_Qy97jM

Dear Sean Voisen,

Can you explain what means "Whiteboard: [gfx-noted], [DevRel:P2] → [gfx-noted], [DevRel:P2] [layout:backlog:2019q3]" ?

Thanks you.

Apparently the current spec draft is something that the WebKit folks consider to be unimplementable.

As of now, backdrop-filter is enabled by default without a flag in Chrome Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=497522#c195.

(In reply to j.deboysere from comment #52)

Can you explain what means "Whiteboard: [gfx-noted], [DevRel:P2] → [gfx-noted], [DevRel:P2] [layout:backlog:2019q3]" ?

It's simply notes for our team (layout) that it is officially on our backlog of work for Q3 2019. Work on this will soon be underway.

Depends on D39097

Depends on D39098

Depends on D39099

Fixes an issue when backdrop-filter is used many time on a page where we would
spend a large amount of time reevaluating render tasks when assigning task depths.

Depends on D40665

Triggered autoland.

https://hg.mozilla.org/mozilla-central/rev/b5d6ed62cda1
https://hg.mozilla.org/mozilla-central/rev/abdb4f5f3323
https://hg.mozilla.org/mozilla-central/rev/94f900c3b514
https://hg.mozilla.org/mozilla-central/rev/593868dee998
https://hg.mozilla.org/mozilla-central/rev/0c820a515e16

This says it's fixed in Firefox 70, it's not. I'm using Firefox 70, beta 3 on a site with backdrop-filter: blur(2px) and it doesn't work. And when the developer tools are opened it says "invalid property name". Same for -webkit-backdrop-filter and I even tried -moz-backdrop-filter.

backdrop-filter and -webkit-backdrop-filter work in Edge, Chrome, and Safari.

(In reply to Wyatt from comment #67)

This says it's fixed in Firefox 70, it's not. I'm using Firefox 70, beta 3 on a site with backdrop-filter: blur(2px) and it doesn't work. And when the developer tools are opened it says "invalid property name". Same for -webkit-backdrop-filter and I even tried -moz-backdrop-filter.

backdrop-filter and -webkit-backdrop-filter work in Edge, Chrome, and Safari.

The fact that's implemented doesn't necessarily mean it's enabled. layout.css.backdrop-filter.enabled is default-false.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #68)

The fact that's implemented doesn't necessarily mean it's enabled. layout.css.backdrop-filter.enabled is default-false.

I have enabled layout.css.backdrop-filter.enabled flag, but in testing on Nightly 71.0a1 (2019-09-03) (64-bit), it still isn't rendering.
The inspector doesn't say that backdrop-filter is an invalid property name so it seems like it's trying, but not actually rendering. I tested both with and without vendor prefixes.

(In reply to Wyatt from comment #67)

This says it's fixed in Firefox 70, it's not. I'm using Firefox 70, beta 3 on a site with backdrop-filter: blur(2px) and it doesn't work. And when the developer tools are opened it says "invalid property name". Same for -webkit-backdrop-filter and I even tried -moz-backdrop-filter.

backdrop-filter and -webkit-backdrop-filter work in Edge, Chrome, and Safari.

This is correct, on Firefox Nightly 71.0a1 (2019-09-03), it also does not work with either backdrop-filter or -webkit-backdrop-filter

(In reply to Emilio Cobos Álvarez (:emilio) from comment #68)

The fact that's implemented doesn't necessarily mean it's enabled. layout.css.backdrop-filter.enabled is default-false.

It does not work, even if layout.css.backdrop-filter.enabled is set to true in about:config

It also won't work without WebRender enabled

(In reply to Daniel from comment #71)

It also won't work without WebRender enabled

Thanks, that did it. Working after enabling gfx.webrender.enabled.

Turns out I'm wrong, enabling layout.css.backdrop-filter.enabled as well as gfx.webrender.enabled does work.

(In reply to Daniel from comment #71)

It also won't work without WebRender enabled

Thanks, Daniel. That helped.

For the record, I spun off bug 1578503 as the "main" bug for enabling backdrop-filter support by default.

Playing with the JSBin example in comment #0, I noticed that backdrop-filter with a blur filter behaves oddly with text. Text behind an element with backdrop-filter: blur(3px) looks as if it has a text shadow (sharp text on top of a blurry shadow) instead of just being blurred. In Chromium it looks as expected. https://jsbin.com/toyubawoka/edit?html,css,output demonstrates the issue.

I filed bug 1578703 for that.

This is already documented: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

And the compat-data already lists it as supported in Fx70 but behind a pref. I think we can call this one done in terms of docs.

Unfortunately in 71.0b1 it became bugged as:

"backdrop-filter: blur(10px)" blurs all text and some other HTMLElements in the whole document (<html>), not only the content below styled element.

In Firefox 70 this problem didn't exist.

Hi Bx, I can't seem to reproduce the issue, do you have a testcase I could look at?

(In reply to Connor Brewster [:cbrewster] from comment #79)

Hi Bx, I can't seem to reproduce the issue, do you have a testcase I could look at?

https://jsfiddle.net/ziom1/kjw2690e/

Changing "transform" or "opacity" property changes invalid blur -- so I have added buttons to check this. For example, changing default opacity (=1) to (0.999) resolves invalid appearance.

Furthermore, I detected that more elements with "backdrop-filter" cumulate the invalid effect.

(In reply to Bx from comment #80)

(In reply to Connor Brewster [:cbrewster] from comment #79)

Hi Bx, I can't seem to reproduce the issue, do you have a testcase I could look at?

https://jsfiddle.net/ziom1/kjw2690e/

Changing "transform" or "opacity" property changes invalid blur -- so I have added buttons to check this. For example, changing default opacity (=1) to (0.999) resolves invalid appearance.

Furthermore, I detected that more elements with "backdrop-filter" cumulate the invalid effect.

This is the expected behavior due to something called Backdrop Roots. You can read more about it in the spec: https://drafts.fxtf.org/filter-effects-2/#BackdropRoot

The backdrop root isolates how much content is included in the backdrop for processing the backdrop-filter effect. The primary motivation is to prevent significant performance degradation in the case of nested effects and to better specify what should happen when backdrop-filter is combined with opacity effects. You can read more about this in the link above.

(In reply to Connor Brewster [:cbrewster] from comment #81)

This is the expected behavior due to something called Backdrop Roots. You can read more about it in the spec: https://drafts.fxtf.org/filter-effects-2/#BackdropRoot

The backdrop root isolates how much content is included in the backdrop for processing the backdrop-filter effect. The primary motivation is to prevent significant performance degradation in the case of nested effects and to better specify what should happen when backdrop-filter is combined with opacity effects. You can read more about this in the link above.

Unfortunately, current "backdrop-filter" behavior is not as expected. You can see what it should be on Chrome, Safari and even Edge, where only the content below styled Element is affected (not all web page). None of the other browsers blurs buttons or text nodes in my example.

Currently backdrop-filter is inexpedient, changing parts where it shouldn't change (like in this JSFiddle: buttons and text nodes which are not even close to the backdrop-filter elements). Moreover, backdrop affects elements which are descendents of the "backdrop-filter" HTMLElement (elements over backdrop-filter are changed, which is ridiculous -- backdrop changes elements below and over HTMLElement? 😏).

Before 71.0 it was all good.

backdrop-filter doesn't work at all for me on Firefox 70.0.1 despite layout.css.backdrop-filter.enabled set to true. See this simple example.

That likely means you don't have webrender enabled. (It's not enabled by default for everyone yet.) You can force it on by setting gfx.webrender.all to true and restarting Firefox. As noted in this bug's title, the implementation right now is only for the webrender backend (which is largely why we haven't enabled backdrop-filter by default yet).

(I tried your testcase on my machine with the webrender & backdrop-filter prefs turned on, and it works just fine - the corner of the blue square gets blurred.)

(In reply to Daniel Holbert [:dholbert] from comment #84)

That likely means you don't have webrender enabled. (It's not enabled by default for everyone yet.) You can force it on by setting gfx.webrender.all to true and restarting Firefox. As noted in this bug's title, the implementation right now is only for the webrender backend (which is largely why we haven't enabled backdrop-filter by default yet).

(I tried your testcase on my machine with the webrender & backdrop-filter prefs turned on, and it works just fine - the corner of the blue square gets blurred.)

You're absolutely right! Works perfectly now, thank you :) Tried it on a much more complex and animated example as well and it's flawless so, congrats to all of you!

Any rough estimate on when both webrender and backdrop-filter will be enabled by default? :)

(In reply to Benjamin De Cock from comment #85)

Any rough estimate on when both webrender and backdrop-filter will be enabled by default? :)

webrender: already enabled by default for some fraction of our userbase (and I think (?) we're slowly ramping this up), though I believe there's some fraction that will never be able to have it on by default because of graphics hardware limitations.

backdrop-filter: not sure. it's complicated by the fact that it's only implemented for webrender right now, so we can't just turn on support for it in our css parser without "lying" on non-webrender configurations. (And there's a decent amount of work involved in implementing it on other backends; and on the other hand, we could theoretically just make the CSS parser only recognize backdrop-filter if webrender is enabled, but that's complicated too, because webrender can also get transparently turned off in the presence of some types of content, I think.) Anyway, that's tracked in bug 1578503, so you can follow along there.

(In reply to Daniel Holbert [:dholbert] from comment #86)

(In reply to Benjamin De Cock from comment #85)

Any rough estimate on when both webrender and backdrop-filter will be enabled by default? :)

webrender: already enabled by default for some fraction of our userbase (and I think (?) we're slowly ramping this up), though I believe there's some fraction that will never be able to have it on by default because of graphics hardware limitations.

backdrop-filter: not sure. it's complicated by the fact that it's only implemented for webrender right now, so we can't just turn on support for it in our css parser without "lying" on non-webrender configurations. (And there's a decent amount of work involved in implementing it on other backends; and on the other hand, we could theoretically just make the CSS parser only recognize backdrop-filter if webrender is enabled, but that's complicated too, because webrender can also get transparently turned off in the presence of some types of content, I think.) Anyway, that's tracked in bug 1578503, so you can follow along there.

Thank you!

I have now added a note at https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#backdrop-filter for this property.

Sebastian

I am just curious when this is slated to be enabled-by-default? It is not documented in the link mentioned above. Are there still failures with this feature I can track somewhere else?

That's tracked in bug 1578503; see in particular its dependency tree.