Bug 263255

Created attachment 468249 [details]
Screenshot illustrating how the pseudo background "dissolves"

1. Create a `.card` element, place it in the middle of the viewport and set any style that would make it visible on it (`background`, `border`, `box-shadow`, doesn't matter).

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

.card {
	place-self: center;
	width: min(100vmin - 1em, 27em);
	aspect-ratio: 3/ 2;
	box-shadow: 0 0 0 4px teal
}
```

2. The `body` acts as the 3D scene and the `.card` as the 3D container in which we place a face, in this case a `::before` pseudo.

```
/* same as before */
body { perspective: 50em }

.card {
	/* same as before */
	transform-style: preserve-3d;
	
	&::before {
		background: hsla(0, 0%, 100%, .35);
		content: 'Hello, World!'
	}
}
```

3. We animate the card by rotating it in 3D.

```
$a: -30deg;

.card {
	/* same as before */
	animation: a 2s ease-in-out infinite alternate
}

@keyframes a {
	0%, 20% { rotate: y $a }
	80%, 100% { rotate: y 180deg - $a }
}
```

4. We give the card face pseudo `backface-visibility: hidden` - this causes the pseudo-element's `background` to be displayed weirdly as if it dissolves into nothing in the part that's in front of the screen plane.

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

The same thing happens if we use a child element instead of a pseudo.

Found this when testing on Linux via Epiphany. Seen no reports of the same happening in actual Safari https://twitter.com/anatudor/status/1712023821878772027

This is problematic when we want to create a rotating card with semitransparent front and back faces.