Closed Bug 1578503 Opened 5 years ago Closed 2 years ago

[filter-effects-2] Enable the CSS backdrop-filter property by default (letting it ride the trains to release)

Categories

(Core :: Layout, enhancement, P3)

enhancement

Tracking

()

RESOLVED FIXED
103 Branch
Webcompat Priority P2
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).

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.

Summary: Enable the CSS backdrop-filter property by default (from Filter Effects Module Level 2) → [filter-effects-2] Enable the CSS backdrop-filter property by default (letting it ride the trains to release)
Depends on: 1573973
No longer depends on: 1578703
Depends on: 1579957
Depends on: 1589198

Whiteboard tag expresses my strong hope that we can ship this in 2020 :)

Whiteboard: [DevRel:P2] → [DevRel:P2][layout:backlog:2020]
Depends on: 1618013
Depends on: 1628046

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

Priority: P3 → P1

Moving to Layout since layout has owned shipping this anyway.

Component: Graphics → Layout

Deprioritizing per feedback on dev-platform for now. Will wait for further rollout of WebRender.

Severity: normal → N/A
Priority: P1 → P3
Whiteboard: [DevRel:P2][layout:backlog:2020] → [DevRel:P2][layout:backlog]
Depends on: 1648323
Depends on: 1649668
Depends on: 1651258
Depends on: 1657997

Considering the current status of the rollout of webrender, is this feature not ready to be enabled now ?

Depends on: 1668495

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.

are there plans to enable this flag by default?

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.

Dear developers,

Will it be possible that this feature will land (be enabled by default) in Firefox ESR 91?

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

Depends on: 1718471
Assignee: nobody → emilio
Status: NEW → ASSIGNED

Ok, it seems there are still a few issues with our backdrop-filter implementation, so we should probably nightly/early-beta only for now...

Assignee: emilio → nobody
Status: ASSIGNED → NEW

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.

Attachment #9240253 - Attachment is obsolete: true
Depends on: 1732563
Webcompat Priority: --- → ?

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

Blocks: compat2021
Depends on: 1738499
Webcompat Priority: ? → P2
Depends on: 1741459
Depends on: 1749625

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

It was intentionally temporary disabled in bug 1741779. It will get re-enabled in bug 1749625.

Sebastian

Depends on: 1591674
No longer depends on: 1591674

Seems to be broken in 97.0.1

It is intentionally disabled. Please see my previous comment!

Sebastian

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!

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

Depends on: 1764496
Depends on: 1768103

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?

(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 the gfx.webrender.all and layout.css.backdrop-filter.enabled configs but they still don't work. Any workarounds?

On which version of Firefox? On nightly it should work.

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.

Assignee: nobody → gwatson
Status: NEW → ASSIGNED
Pushed by gwatson@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/3cf20c1420e5
Enable backdrop-filter by default r=gfx-reviewers,jrmuizel

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.

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!

Flags: needinfo?(gwatson)
Pushed by gwatson@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/aab73e3ffda7
Enable backdrop-filter by default r=gfx-reviewers,jrmuizel
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 103 Branch
Regressions: 1779085

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

Flags: needinfo?(gwatson)

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

Flags: needinfo?(gwatson)

This doesn't seem to have been included in the Firefox 103 release notes or the "Firefox 103 for developers" MDN page.

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

Please request a release note.

Flags: needinfo?(gwatson)

Is the release note request still needed, given comment #38? If so, how do I do that?

Flags: needinfo?(gwatson)

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

Depends on: 1784093
Regressions: 1797051
Blocks: 1824425
Regressions: 1825267
Regressions: 1826177
Regressions: 1833044
You need to log in before you can comment on or make changes to this bug.