Bug 263255 – Descendant of 3D element dissolves in front of the screen plane if backface-visibility: hidden

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: WebKitGTK

[Ana Tudor]

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.

[Ahmad Saleem]

*** Safari Technology Preview & WebKit ToT (275657@main) ***

On turn, you don't get 'white' background in container and text. Also no smudges / dissolves like reference image.

*** Chrome Canary 124 ***

Same as Safari

*** Firefox Nightly 125 ***

You don't get white background on flip / turn but you get 'text'. Also no smudges / dissolves like reference image.

____

Smudges / dissolve might be 'Epiphany' specific issue but don't have test machine to test.

[Fujii Hironori]

Fixed by 286605@main.

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