[filter-effects-2] Enable the CSS backdrop-filter property by default (letting it ride the trains to release)
Categories
(Core :: Layout, enhancement, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox103 | --- | fixed |
People
(Reporter: dholbert, Assigned: gw)
References
(Depends on 5 open bugs, Blocks 4 open bugs, Regressed 4 open bugs, )
Details
(5 keywords, Whiteboard: [DevRel:P2][layout:backlog])
Attachments
(1 file, 1 obsolete file)
I'm filing this bug to track what's needed to enable the backdrop-filter
CSS Property by default.
(This probably means having it implemented for all supported graphics backends -- note that as of Firefox 70, we have this feature implemented for one graphics backend, WebRender, via bug 1178765. To try that out you have to manually turn on support for the property by toggling layout.css.backdrop-filter.enabled
, and you also need WebRender enabled -- it's on by default for some users; others may need to set gfx.webrender.all
to true and restart Firefox in order to try it).
Reporter | ||
Comment 1•5 years ago
|
||
Looks like bug 1573964 already tracks this, actually (didn't find it initially because I didn't see it linked from bug 1178765).
I'm going to dupe that one to this bug, since this bug here has more information/keywords/bug-relationships.
Reporter | ||
Updated•5 years ago
|
Comment 3•4 years ago
|
||
Whiteboard tag expresses my strong hope that we can ship this in 2020 :)
Updated•4 years ago
|
Comment 4•4 years ago
|
||
Now that we triage by severity, setting priority to P1 to reflect backlog prioritization on this bug as either in-progress, or planned development in the near term. See https://wiki.mozilla.org/Platform/Layout#Backlog_Tracking_in_Bugzilla
Comment 5•4 years ago
|
||
Moving to Layout since layout has owned shipping this anyway.
Comment 6•4 years ago
|
||
Deprioritizing per feedback on dev-platform for now. Will wait for further rollout of WebRender.
Updated•4 years ago
|
Considering the current status of the rollout of webrender, is this feature not ready to be enabled now ?
Comment 8•3 years ago
|
||
Version 82.0.2, Windows - I tested in on my application UI that uses the backdrop filter heavily - I don't see any differences in rendering between Chromium based browsers and Firefox. The Windows version seems ready. BTW - disabling the effect on UI that uses it makes the UI unreadable, because the reason backdrop blur filter is used is to make text readable while having some partial transparency.
Updated•3 years ago
|
Comment 9•3 years ago
|
||
are there plans to enable this flag by default?
Reporter | ||
Comment 10•3 years ago
|
||
Yes - the plan is to enable it by default once we've got WebRender fully rolled out to all users. Possibly sooner, via bug 1618013, though it looks like we need to do a bit more work over there before that can land.
Comment 11•3 years ago
|
||
Dear developers,
Will it be possible that this feature will land (be enabled by default) in Firefox ESR 91?
Comment 12•3 years ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #10)
Yes - the plan is to enable it by default once we've got WebRender fully rolled out to all users. Possibly sooner, via bug 1618013, though it looks like we need to do a bit more work over there before that can land.
Sadly, WebRender disables subpixel antialiasing in many situations, and it's jarring to me when I see subpixel antialiasing semi-randomly turn on and off for text I'm reading (in Mastodon instances, it will happen for several seconds after a scroll wheel event, but not if I use auto scrolling by middle-clicking). Yes, I'm using gfx.webrender.quality.force-subpixel-aa-where-possible
. I figure the disabling of subpixel antialiasing is to enhance performance though, so not really a bug to file.
However, I'm wanting to write and use an extension that would use backdrop filter extensively to apply SVG filters to entire pages without interfering with any filters the page itself might use.
I've tested the idea out by modifying an existing Chrome extension that kinda did something somewhat similar, and it's worked well for me with WebRender, but I'd really like to use it without WebRender so I don't have to put up with subpixel antialiasing turning on and off all the time. Are there any plans to add this to the backend used when layers.acceleration.force-enabled
is set to true
, and webrender is disabled? If it matters, I'm on desktop Linux, using X11 for now.
Comment 14•3 years ago
|
||
Updated•3 years ago
|
Updated•3 years ago
|
Comment 16•3 years ago
|
||
Ok, it seems there are still a few issues with our backdrop-filter implementation, so we should probably nightly/early-beta only for now...
Updated•3 years ago
|
Comment 17•3 years ago
|
||
Comment on attachment 9240253 [details]
Bug 1578503 - Now that WR is everyhwere, enable backdrop-filter and let it ride the trains. r=jrmuizel
Revision D125054 was moved to bug 1729894. Setting attachment 9240253 [details] to obsolete.
Updated•3 years ago
|
Updated•3 years ago
|
Reporter | ||
Comment 18•2 years ago
|
||
FWIW, this WPT test (from the compat2021 test-set) currently fails in Firefox due to a dependency on this feature:
https://wpt.fyi/results/css/css-transforms/preserve-3d-flat-grouping-properties.html
https://wpt.live/css/css-transforms/preserve-3d-flat-grouping-properties.html
(The specific check that fails is: "Preserve-3d element flattened due to backdrop-filter")
Updated•2 years ago
|
Comment 19•2 years ago
|
||
enabling the layout.css.backdrop-filter.enabled
and gfx.webrender.all
in about:config
does not seem to work anymore? https://i.imgur.com/L0S5PrK.jpg
Comment 20•2 years ago
|
||
It was intentionally temporary disabled in bug 1741779. It will get re-enabled in bug 1749625.
Sebastian
Comment 21•2 years ago
|
||
Seems to be broken in 97.0.1
Comment 22•2 years ago
|
||
It is intentionally disabled. Please see my previous comment!
Sebastian
Comment 23•2 years ago
|
||
What seems even worse to me than not having that feature enabled after all those years is that when I wirte a @supports((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) CSS condition Firefox 98.0.1 uses the rules inside, which it should NOT do, as it does not support the backdrop-filter blur!
Reporter | ||
Comment 24•2 years ago
•
|
||
(In reply to Markus Mathieu from comment #23)
What seems even worse to me than not having that feature enabled after all those years is that when I wirte a @supports((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) CSS condition Firefox 98.0.1 uses the rules inside, which it should NOT do, as it does not support the backdrop-filter blur!
That should absolutely not happen, unless you explicitly toggle about:config
pref layout.css.backdrop-filter.enabled
to true
. Perhaps that's the explanation?
(I just tested locally, and I'm seeing @supports-guarded css being correctly ignored when that pref is in its default state of disabled, and honored when the pref is enabled. If you're seeing something different, please file a new bug with a testcase and link the new bug from here, and we can discuss/investigate there.)
Comment 26•2 years ago
|
||
Hey developers, I tried to use the backdrop-filter
and -webkit-backdrop-filter
property but they both don't seem to work. I also enabled the gfx.webrender.all
and layout.css.backdrop-filter.enabled
configs but they still don't work. Any workarounds?
They do work in other chromium-based browsers.
How do I enable this property?
Comment 27•2 years ago
|
||
(In reply to probablynotyasho from comment #26)
Hey developers, I tried to use the
backdrop-filter
and-webkit-backdrop-filter
property but they both don't seem to work. I also enabled thegfx.webrender.all
andlayout.css.backdrop-filter.enabled
configs but they still don't work. Any workarounds?
On which version of Firefox? On nightly it should work.
Assignee | ||
Comment 28•2 years ago
|
||
There are still a few remaining issues with the updated backdrop
filter implementation, specifically:
- We don't use reflectMode yet for blurs (quality issue in some cases)
- Performance may not be optimal in all use cases
However, we can try enabling by default now and work on these as
follow ups.
Updated•2 years ago
|
Comment 29•2 years ago
|
||
Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/3cf20c1420e5 Enable backdrop-filter by default r=gfx-reviewers,jrmuizel
Comment 30•2 years ago
|
||
Backed out for xpcshell failures on test_css-properties-db.js
Backout link: https://hg.mozilla.org/integration/autoland/rev/ac7195fa996c0f2d720c2f4eb17f5a2f0c7f96a8
Log link: https://treeherder.mozilla.org/logviewer?job_id=380685391&repo=autoland&lineNumber=2765
Reporter | ||
Comment 31•2 years ago
|
||
Yeah, that's the build error that everyone hits when adding/enabling a CSS property, until bug 1320607 is fixed someday. :-/
gw: you just need to run this in a build with your patch applied:
./mach devtools-css-db
That should produce some changes to an auto-generated source file, which you should then incorporate into your patch.
Assignee | ||
Comment 32•2 years ago
|
||
Yup, done that and updated the patch - will do another try run just to check (there was also an unexpected PASS), and then re-land. Thanks!
Comment 33•2 years ago
|
||
Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/aab73e3ffda7 Enable backdrop-filter by default r=gfx-reviewers,jrmuizel
Comment 34•2 years ago
|
||
bugherder |
Comment 35•2 years ago
|
||
Hello all,
I am updating the Browser compatibility table in the docs for this feature: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility. I see that layout.css.backdrop-filter.enabled
is now true
by default. But gfx.webrender.all
still needs to be set to true in about:config. Is that correct?
Thanks,
Dipika
Reporter | ||
Comment 36•2 years ago
|
||
(In reply to Dipika from comment #35)
But
gfx.webrender.all
still needs to be set to true in about:config. Is that correct?
No, that WebRender pref doesn't need to be set anymore in order to get this feature.
It used to be needed in order to turn on WebRender, but as of Firefox 93, WebRender is the only graphics backend in Firefox; it's on for everyone automatically.
Updated•2 years ago
|
Comment 37•2 years ago
|
||
This doesn't seem to have been included in the Firefox 103 release notes or the "Firefox 103 for developers" MDN page.
Comment 38•2 years ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #36)
No, that WebRender pref doesn't need to be set anymore in order to get this feature.
It used to be needed in order to turn on WebRender, but as of Firefox 93, WebRender is the only graphics backend in Firefox; it's on for everyone automatically.
Thank you! Thats helpful info.
(In reply to George K. from comment #37)
This doesn't seem to have been included in the Firefox 103 release notes or the "Firefox 103 for developers" MDN page.
"Firefox 103 for developers" is in the process of being updated. A PR is open and will most likely be merged by tomorrow: https://github.com/mdn/content/pull/18811. The BCD table is also updated. The updated table will be available on the content page as soon as BCD repo is built.
Assignee | ||
Comment 40•2 years ago
|
||
Is the release note request still needed, given comment #38? If so, how do I do that?
Comment 41•2 years ago
|
||
(In reply to Glenn Watson [:gw] from comment #40)
Is the release note request still needed, given comment #38? If so, how do I do that?
See https://wiki.mozilla.org/Release_Management/Release_Notes for details.
Description
•