Bug 263273 – 3D children disappear when they get backdrop-filter

• Component: WebKitGTK
• Status: RESOLVED DUPLICATE

[Ana Tudor]

1. Place a 3D `.system` in the middle of the viewport, the `body` being used as a scene.

```
html, body, div { display: grid }
html { height: 100% }
body { perspective: 35em }

.system {
	place-self: center;
	transform-style: preserve-3d
}
```

2. Use its two pseudos to create two square shapes inside it. These get stacked one on top of the other and we give them a `border` and `background`.

```
.system {
	/* same as before */
	
	&::before, &::after {
		grid-area: 1/ 1;
		border: solid 4px black;
		padding: .5*$d;
		background: hsla(0, 0%, 70%, .3);
		content: ''
	}
}
```

3. Make them rotate around a central point between them.

```
.system {
	/* same as before */
	
	&::before, &::after {
		/* same as before */
		animation: a 2*$t linear infinite
	}
	
	&::after { animation-delay: -1*$t }
}

@keyframes a {
	0% { transform: rotatey(0deg) translatez($d) }
	100% { transform: rotatey(1turn) translatez($d) }
}
```

4. Set `backdrop-filter: blur(4px)` on the two squares. This makes the squares disappear when testing on Linux with Epiphany.

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

This doesn't seem to be happening in actual Safari https://twitter.com/anatudor/status/1714355567102173587

[Fujii Hironori]

Fixed by 286605@main.

*** This bug has been marked as a duplicate of bug 282682 ***