1799334 - backdrop-filter doesn't blur remote <browser> element

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect, P2)

Description

[[:userChrome.css]]

Attachment: backdrop-filter-working-old.png

• Using userChrome.css custom file before backdrop-filter was disabled, fixed and re-enabled (around ver. 95.0), you could set this CSS property for firefox UI elements, like:
  -- absolute position bookmarks bar;
  -- search breakout megabar;
  -- tabs, etc.

• Attached pictures - shows you could use backdrop-filter for UI elements before.

Is that a bug or is there a reason it was disabled for UI elements after re-enabling it?

Comment 1

[Bob Hood [:bhood]]

Checked with Glenn, and this definitely appears to be a regression.

Comment 2

[[:userChrome.css]]

Attachment: Screenshot 2023-07-26 174430.png

Just wanted to let you know that it still broken on Firefox v115/v117nightly.
One thing I noticed that blur rendering works in settings menu.

Comment 3

[[:userChrome.css]]

Forgot to mention that flag "layout.css.backdrop-filter.enabled" is used.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I was poking at some of these effects and found this issue.

Here's a patch that reproduces the issue:

diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
index b5684c5f6f4b9..a3ff1a8c2b3e4 100644
--- a/browser/themes/shared/urlbar-searchbar.css
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -242,6 +242,8 @@
 }

 #urlbar[breakout][breakout-extend] > #urlbar-background {
+  background-color: rgba(0, 0, 0, .3);
+  backdrop-filter: blur(10px);
   animation-name: urlbar-grow;
   animation-duration: 0s;
   animation-timing-function: var(--animation-easing-function);

What is going on is that blurring remote tabs (like the new tab page) doesn't work. However blurring same-process tabs like about:config does work.

I thought this could be more general but http://crisal.io/tmp/backdrop-filter-iframe.html indicates this works for content... Glenn, do you know the difference here off-hand? Are top level tabs treated specially by webrender vs. cross-origin iframes? I would've expected them to be somewhat similar from WR's side.

Comment 5

[Glenn Watson [:gw]]

They will look quite different from WR side (remote tabs get an iframe display item, local tabs get embedded in parent display list). Having said that, I'm not sure why that would make any difference to whether backdrop-filter works on it, so it will need investigation.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Right, but my point is that in the test-case above (http://crisal.io/tmp/backdrop-filter-iframe.html), I have a local iframe and a remote iframe, and those both work, right?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

But yeah maybe there's something weird going on there on the top level display list or something.