263273 2023-10-17 12:59:08 -0700 3D children disappear when they get backdrop-filter 2024-11-14 13:55:09 -0800 1 1 1 Unclassified WebKit WebKitGTK Other PC Linux RESOLVED DUPLICATE 282682 P2 Normal --- 1 ana.tudor.lhnh webkit-unassigned bugs-noreply fujii webkit-bug-importer oldest_to_newest 1985654 0 ana.tudor.lhnh 2023-10-17 12:59:08 -0700 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 2075163 1 fujii 2024-11-14 13:55:09 -0800 Fixed by 286605@main. *** This bug has been marked as a duplicate of bug 282682 ***