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.