1816561 - preserve-3d on parent breaks backdrop-filter

Status: NEW

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

Description

[Ana Tudor]

Attachment: comp.png

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

Steps to reproduce:

1. Create two intersecting elements/ pseudos within the same 3D rendering context.

html, body, div { display: grid }

html { height: 100% }

body { perspective: 25em }

div {
	place-self: center;
	transform-style: preserve-3d;
	
	&::before, &::after {
		--i: 0;
		grid-area: 1/ 1;
		width: 35vmin;
		aspect-ratio: 1;
		transform: rotatey(calc((2*var(--i) - 1)*45deg));
		border: solid 4px black;
		background: hsla(calc(var(--i)*240 + 30), 100%, 50%, .65);
		content: ''
	}
	
	&::after { --i: 1 }
}

2. Set a backdrop-filter: blur(3px) on them.

Actual results:

There's no filter effect applied behind the intersecting (pseudo)elements.

Live test https://codepen.io/thebabydino/pen/vYzBPgd

This makes it impossible to code things like intersecting glassy cubes https://larameeee.tumblr.com/post/61852604066/bullseye-gallery-heike-brachlow-artistgeneral

Expected results:

The backdrop-filter effect should have been applied. This is what happens in Chromium browsers and in Safari (though Safari doesn't get the filtered area behind 3D transformed elements completely right).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Ana Tudor]

Attachment: 3d_breaks_backdrop_filter.webm

I think I finally figured out that it's the preserve-3d on the parent that's the problem, not the intersection. Changing the bug title.

Here's a test case:

1. Place an element in the middle of the page, the body being the scene (where we set the perspective).

html, body, div { display: grid }
html { height: 100% }
body { perspective: 35em }
.system { place-self: center }

2. Make this element a 3D rendering context (set transform-style: preserve-3d on it).

3. Stack its two pseudos one on top of the other, make them visible by giving them an obvious border + a semitransparent background and make them orbit around a central vertical axis such that they occupy diametrally opposing positions on the orbit.

.system::before, .system::after {
	grid-area: 1/1;
	border: solid 4px black;
	padding: 4em;
	background: hsla(0, 0%, 70%, .3);
	backdrop-filter: blur(4px);
	animation: a 8s linear infinite;
	content: "";
}
.system::after { animation-delay: -4s }

@keyframes a {
	0% { transform: rotatey(0deg) translatez(8em) }
	100% { transform: rotatey(1turn) translatez(8em) }
}

4. Set backdrop-filter: blur(4px) on the pseudos.

So I'd expect the backdrop-filter applied behind the pseudos. This is what happens in Chrome.

But the backdrop-filter doesn't get applied in Firefox. These two pseudos don't even intersect, they just pass in front of one another during the rotation.

I've tested in Firefox 120 and 118 on Ubuntu 22.04 LTS and get the same result in both. Additionally, the problem is also reproducible on Windows.

Live test

Removing transform-style: preserve-3d from the parent and we get the backdrop-filter effect on the pseudos. The problem is that in this case, we lose the 3D structure and the ::after is always on top/ in front of the ::before.

This bug is preventing the CSS versions of some glassmorphism effects from working in Firefox.

This demo aims to reproduce an animation found on Dribbble. It works in Chrome, but there's no backdrop-filter effect in Firefox. Removing transform-style: preserve-3d means the backdrop-filter works, but we lose the 3D orbiting motion effect.

This demo is a basic version of the two sided rotating card with a glassmorphism effect. There is no glassmorphism effect in Firefox due to this bug.

Comment 3

[James Graham [:jgraham]]

Do we have web-platform-tests that cover this? Looking at https://wpt.fyi/results/css/filter-effects?label=master&label=experimental&aligned&q=backdrop-filter I'm not seeing any use of preserve-3d, which makes this issue less visible.

Comment 4

[triguy]

Hey, I'm developing a layered 3D webpage and this bug is interfering with my webpage. I'm going to need to use user agent sniffing as this technique is required for compatibility with Chrome.

Comment 5

[triguy]

Is there a reliable way to detect this bug with JS? I'd rather do that if possible. Thanks!

Comment 6

[triguy]

I'm reworking my site to work correctly with the spec. Technically, this isn't a bug according to the spec. But, it certainly feels unintuitive. Chromium also had this issue. Here's their bug report for reference: https://issues.chromium.org/issues/323735424