1952612 - backdrop-filter not working with transform-style:preserve-3d

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[trusktr]

Attachment: reproduction.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Steps to reproduce:

• Unzip the reproduction.zip file
• Open LUME.html in Firefox

Actual results:

Notice that the content behind the transparent surface is not blurred.

Expected results:

The content behind the surface should be blurred.

Chrome has a similar but different issue:

https://issues.chromium.org/issues/323735424

Safari used to have the same exact result as Firefox, but they have since fixed it and it is beautiful in Safari.

Comment 1

[trusktr]

Attachment: chrome-reproduction-mar-7-2025.png

Comment 2

[trusktr]

Attachment: safari-reproduction-mar-7-2025.png

Comment 3

[trusktr]

Attachment: firefox-reproduction-mar-7-2025.png

Comment 4

[trusktr]

Attachment: edge-reproduction-mar-7-2025.png

Comment 5

[trusktr]

The attached screenshots show what the reproduction looks like in all browsers.

See the Chromium issue for more screenshots.

Comment 6

[trusktr]

Observations for each browser:

• Safari: works as expected
• Edge and Chrome: the filter is applied, but the background also shows through, so we see the actual background behind the filter background.
• Firefox: no filter is applied at all, only transparency