Bug 263194

Created attachment 468229 [details]
Comparative screenshots of the result in Chrome vs. Epiphany

1. Create a 3D `.system` with a `.glass` component and place it in the middle of the `body` scene, while its components are in turn placed in the middle of the system. Stack all components (the `.glass` and the `.system` pseudos) one on top of the other.

```
html, body, div { display: grid }

html { height: 100% }

body, div { place-items: center }

body {
	perspective: 100em;
	background: linear-gradient(-30deg, #313131, #3a3a3a)
}

div, ::before, ::after {
	grid-area: 1/ 1;
	aspect-ratio: 1
}

.system { transform-style: preserve-3d }
```

2. Give the glass component dimensions, a semitransparent `background` and a `backdrop-filter`:

```
.glass {
	width: min(24em, 50vmin);
	border-radius: 50%;
	box-shadow: inset 0 3px 2px currentcolor;
	background: currentcolor;
	color: hsla(0, 0%, 100%, .2);
	backdrop-filter: blur(12px)
}
```

3. Style the `.system` pseudos as the other two components, orbiting (involves animating the rotation around the *y* axis `--ay`) and rolling around (involves animating the rotation around the *z* axis `--az`) the `.glass`.

```
@property --ay {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

@property --az {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

.system {	
	&::before, &::after {
		--p: 0;
		width: 33.3%;
		border-radius: calc(var(--p)*50%);
		transform: 
			rotatey(calc(-1*var(--ay))) 
			translate(275%) 
			rotatey(var(--ay)) 
			rotate(calc(var(--az) - 45deg));
		background: 
			hsl(113, calc(var(--p)*81%), calc((1 - var(--p)/3)*100%));
		animation: 
			ay 2*$t ease-in-out infinite, 
			az $t ease-in-out infinite;
		animation-delay: calc(var(--p)*-1*#{$t});
		content: ''
	}
	
	&::after { --p: 1 }T
}

@keyframes ay {
	50% { --ay: .5turn }
	100% { --ay: 1turn }
}
```

The result should reproduce this Dribbble animation https://dribbble.com/shots/18943317-Animation

4. Testing via Epiphany, the pseudo passing behind the `.glass` is blurred (correct), but the pseudo passing *in front of* the `.glass` also gets a blur-like glow around it (incorrect). Live test https://codepen.io/thebabydino/pen/VwqgrrE

We have the same problem even if we don't animate custom properties on pseudos, but instead transforms on `div` children of the `.system`. Live test https://codepen.io/thebabydino/pen/OJrddJj

We even have the same problem if we ditch the real 3D system and emulate it with `z-index` animation. Live test https://codepen.io/thebabydino/pen/poqmJNa

This problem doesn't seem to also happen in actual Safari https://twitter.com/anatudor/status/1713884172496838758

All three demos work correctly in Chrome.

The first demo doesn't work in Firefox because it's animating custom properties (not yet supported). The second demo also doesn't work in Firefox because we're hitting this bug https://bugzilla.mozilla.org/show_bug.cgi?id=1816561#c2 The third demo (no real 3D) works correctly in Firefox.