1808232 - 3D transform + backface-visibility: hidden breaks backdrop-filter

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[Ana Tudor]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/110.0

Steps to reproduce:

1. Give an element dimensions & a semitransparent background, while its parent gets a perspective set on it and a background with some sharp separation lines that would make any bluriness applied via a filter obvious:

body {
  perspective: 25em;
  /* a background */
}

div {
  /* dimensions */
  background: hsla(0, 0%, 100%, .35);
}

2. Set a 3D transform & a backdrop-filter on the element:

transform: rotatey(15deg);
backdrop-filter: blur(5px)

So far, so good - the body backdrop gets blurred behind the 3D rotated element.

But often, we may want something more than just a static rotated element.

We may want a card that rotates on hover and has two different faces, like here https://www.cssscript.com/demo/glassmorphism-credit-card/

Or a glassy looking 3D shape, like here https://codepen.io/thebabydino/pen/yLqJoog/88bd6d750752a9f33efb6be01bf5f7a8 (this was a base test for what a glassy cube like https://dribbble.com/shots/6026036-Glass-blocks would end up looking like in CSS).

This brings us to the next step:

4. Add backface-visibility: hidden on our element.

Actual results:

This breaks the 3D effect (reported here https://bugzilla.mozilla.org/show_bug.cgi?id=1789055) AND the backdrop-filter: effect (no more blurriness)

Test https://codepen.io/thebabydino/pen/oNMLELr

Expected results:

The 3D effect and the blurriness should have been retained. This is what happens in both Chromium browsers & Safari (the card demo seems broken in Safari, but that's only because backdrop-filter is missing the -webkit- prefix there; adding the prefix from DevTools makes the glassmorphism effect work there too)

Comment 1

[Ana Tudor]

Attachment: chrome_vs_firefox.png

Screenshot of intended demo result (Chrome) vs. the actual result in Firefox.

Comment 2

[Kelsey Gilbert [:jgilbert]]

Confirmed on Windows differences between Firefox and Chrome, as described.
Not a dire issue, but not great, but probably S4.
Over to @gw

Comment 3

[Ana Tudor]

Attachment: Looks good in Firefox 120 (current Nightly)

This seems to be working fine now in Firefox 120 (current Nightly). Hit some other problems with backdrop-filter and 3D transforms in the meanwhile and I'll open separate bugs, but this one in particular seems fixed?

Checked now in Firefox 118 too. Looks fine there as well.

Comment 4

[Mayank Bansal]

2023-10-10T23:19:37.640000: DEBUG : Found commit message:
Bug 1812341 - Fix 3d transforms bug with backface-visibility: hidden r=gfx-reviewers,jrmuizel