Implement backdrop-filter from Filter Effects Module Level 2 (for the webrender graphics backend)
Categories
(Core :: Graphics, enhancement, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox70 | --- | fixed |
People
(Reporter: jonnyscholes, Assigned: cbrewster)
References
(Blocks 2 open bugs, )
Details
(6 keywords, Whiteboard: [gfx-noted], [DevRel:P2] [layout:backlog:2019q3])
Attachments
(5 files)
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Comment 1•9 years ago
|
||
Comment 3•9 years ago
|
||
Comment 4•9 years ago
|
||
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment 14•9 years ago
|
||
Comment 15•9 years ago
|
||
Comment 16•8 years ago
|
||
Updated•8 years ago
|
Updated•8 years ago
|
Updated•8 years ago
|
Comment 18•8 years ago
|
||
Comment 19•7 years ago
|
||
Comment 20•7 years ago
|
||
notechnicalvalue |
Comment 21•7 years ago
|
||
Comment 22•7 years ago
|
||
Comment 23•7 years ago
|
||
Comment 24•7 years ago
|
||
Updated•7 years ago
|
Updated•7 years ago
|
Comment hidden (advocacy) |
Comment 26•7 years ago
|
||
Comment 27•7 years ago
|
||
Comment hidden (advocacy) |
Comment 29•6 years ago
|
||
Updated•6 years ago
|
Updated•6 years ago
|
Comment 30•6 years ago
|
||
Comment 31•6 years ago
|
||
Comment 32•6 years ago
|
||
Comment 33•6 years ago
|
||
Comment 34•6 years ago
|
||
Comment 35•6 years ago
|
||
Comment 36•6 years ago
|
||
Comment 37•6 years ago
|
||
Comment 38•6 years ago
|
||
Comment 39•6 years ago
|
||
Comment 40•6 years ago
|
||
Comment 41•6 years ago
|
||
Comment hidden (advocacy) |
Comment 43•6 years ago
|
||
Comment 44•6 years ago
|
||
Comment 45•6 years ago
|
||
Comment 46•6 years ago
|
||
Updated•6 years ago
|
Comment hidden (me-too) |
Comment hidden (me-too) |
Comment hidden (advocacy) |
Comment 50•6 years ago
|
||
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
Comment 51•6 years ago
|
||
Today's Blink intend to ship:
https://groups.google.com/a/chromium.org/forum/m/#!topic/blink-dev/GRl1_Qy97jM
Updated•6 years ago
|
Updated•5 years ago
|
Comment 52•5 years ago
|
||
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.
Comment 54•5 years ago
|
||
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.
Updated•5 years ago
|
Comment 55•5 years ago
|
||
(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.
Comment hidden (me-too) |
Assignee | ||
Comment 57•5 years ago
|
||
Assignee | ||
Comment 58•5 years ago
|
||
Depends on D39097
Assignee | ||
Comment 59•5 years ago
|
||
Depends on D39098
Updated•5 years ago
|
Updated•5 years ago
|
Comment hidden (me-too) |
Assignee | ||
Comment 61•5 years ago
|
||
Depends on D39099
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Comment 62•5 years ago
|
||
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
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Comment 64•5 years ago
|
||
Assignee | ||
Updated•5 years ago
|
Comment 65•5 years ago
|
||
bugherder |
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
Assignee | ||
Updated•5 years ago
|
Comment hidden (me-too) |
Updated•5 years ago
|
Comment 67•5 years ago
|
||
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.
Comment 68•5 years ago
|
||
(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.
Comment 69•5 years ago
|
||
(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.
Comment 70•5 years ago
|
||
(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
Comment 71•5 years ago
|
||
It also won't work without WebRender enabled
Comment 72•5 years ago
|
||
(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
.
Comment 73•5 years ago
|
||
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.
Comment 74•5 years ago
|
||
For the record, I spun off bug 1578503 as the "main" bug for enabling backdrop-filter
support by default.
Comment 75•5 years ago
|
||
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.
Comment 76•5 years ago
|
||
I filed bug 1578703 for that.
Comment 77•5 years ago
|
||
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.
Updated•5 years ago
|
Comment 78•5 years ago
|
||
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.
Assignee | ||
Comment 79•5 years ago
|
||
Hi Bx, I can't seem to reproduce the issue, do you have a testcase I could look at?
Comment 80•5 years ago
|
||
(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.
Assignee | ||
Comment 81•5 years ago
|
||
(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.
Comment 82•5 years ago
|
||
(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.
Comment 83•5 years ago
|
||
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.
Comment 84•5 years ago
|
||
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.)
Comment 85•5 years ago
|
||
(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
totrue
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? :)
Comment 86•5 years ago
•
|
||
(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.
Comment 87•5 years ago
|
||
(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!
Comment 88•5 years ago
|
||
I have now added a note at https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#backdrop-filter for this property.
Sebastian
Comment 89•5 years ago
|
||
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.
Description
•