250919 2023-01-20 15:41:10 -0800 Overlaid elements with rotating CSS animations glitch & break layer order 2023-01-22 19:18:10 -0800 1 1 1 Unclassified WebKit Compositing Safari 16 Mac (Apple Silicon) macOS 13 RESOLVED DUPLICATE 248282 BrowserCompat P2 Normal --- 1 dev webkit-unassigned graouts karlcow mattwoodrow simon.fraser oldest_to_newest 1927034 0 464584 dev 2023-01-20 15:41:10 -0800 Created attachment 464584 Minimal reproduction of the bug Overlaid elements with CSS rotate CSS animation transforms break through the UI in unexpected ways resulting in a glitchy rendering. The attached file index.html showcases the bug. On the page is a loading spinner with CSS animations that should be hidden behind an overlay/modal with purple background and text. The expected behaviour would be that the spinner would be hidden behind the overlay. On tested WebKit browsers the spinner is unexpectedly partially rendered on top. Renders as expected in Chrome & Firefox. Live demo of index.html: https://webkit-bug-2023-01-20.vercel.app Reproduction repo with video & screenshots: https://github.com/jonrh/webkit-bug-2023-01-20 Browsers tested that exhibit the bug: + Safari running on iOS 16.1, iPhone 13 Mini + Safari Version 16.2 (18614.3.7.1.5) (WebKit 605.1.15 ?), M2 MacBook Air, macOS 13.1 + Orion Version 0.99.122-beta (WebKit 615.1.11.7), M2 MacBook Air, macOS 13.1 Browsers tested that render as expected: + Chrome Version 108.0.5359.124 (Official Build) (arm64) + Firefox Version 109.0 (64-bit) Possible duplicates: + https://bugs.webkit.org/show_bug.cgi?id=236019 + https://bugs.webkit.org/show_bug.cgi?id=212130 + https://bugs.webkit.org/show_bug.cgi?id=181709 Background: Originally observed when implementing a Paddle Checkout [0], an iframe overlay for collecting credit card payments. On a successful completion the underlying website behind the iframe modal would render the same square loading spinner. This resulted in jarring glitches where the UI that should be hidden (not just the spinner) became partially overlaid over the modal. [0]: https://developer.paddle.com/guides/b4f911a991bd7-overlay-checkout 1927197 1 simon.fraser 2023-01-21 20:22:14 -0800 This is about 3D transform interop. 1927350 2 mattwoodrow 2023-01-22 16:59:26 -0800 This has been fixed by bug 248282 *** This bug has been marked as a duplicate of bug 248282 *** 464584 2023-01-20 15:41:10 -0800 2023-01-20 15:41:10 -0800 Minimal reproduction of the bug index.html text/html 1697 dev PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0i dXRmLTgiLz4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdp ZHRoLCBpbml0aWFsLXNjYWxlPTEiLz4KICA8dGl0bGU+V2ViS2l0IGJ1Zzogcm90YXRpbmcgQ1NT IGFuaW1hdGlvbnMgYnJlYWsgbGF5ZXIgb3JkZXI8L3RpdGxlPgogIDxzdHlsZT4KICAgIC8qIFNw aW5LaXQgcGxhbmUgc3Bpbm5lci4gU291cmNlOiBodHRwczovL2dpdGh1Yi5jb20vdG9iaWFzYWhs aW4vU3BpbktpdCAqLwogICAgLnNwaW5uZXIgewogICAgICB3aWR0aDogNTBweDsKICAgICAgaGVp Z2h0OiA1MHB4OwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjIyOwogICAgICBhbmltYXRpb246 IHNwaW5uZXIgMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQ7CiAgICB9CgogICAgLyogU3BpbktpdCBw bGFuZSBzcGlubmVyIGFuaW1hdGlvbiwgcm90YXRlIHNlZW1zIHRvIGNhdXNlIHRoZSBpc3N1ZSAq LwogICAgQGtleWZyYW1lcyBzcGlubmVyIHsKICAgICAgMCUgeyB0cmFuc2Zvcm06IHBlcnNwZWN0 aXZlKDEyMHB4KSByb3RhdGVYKDBkZWcpIHJvdGF0ZVkoMGRlZyk7IH0KICAgICAgNTAlIHsgdHJh bnNmb3JtOiBwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwLjFkZWcpIHJvdGF0ZVkoMGRl Zyk7IH0KICAgICAgMTAwJSB7IHRyYW5zZm9ybTogcGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgo LTE4MGRlZykgcm90YXRlWSgtMTc5LjlkZWcpOyB9CiAgICB9CgogICAgLyogSG9yaXpvbnRhbCBh bmQgdmVydGljYWwgY2VudGVyICovCiAgICAuY2VudGVyIHsKICAgICAgZGlzcGxheTogZmxleDsK ICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7 CiAgICAgIGhlaWdodDogMTAwdmg7CiAgICB9CgogICAgLyogQ292ZXJzIHRoZSBlbnRpcmUgc2Ny ZWVuIHdpdGggbGlrZSBhIG1vZGFsIG1pZ2h0LCBwdXJwbGUgYmFja2dyb3VuZCAqLwogICAgLm92 ZXJsYXkgewogICAgICB6LWluZGV4OiAxMDAwOwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWJl Y2NhcHVycGxlOwogICAgICBtYXJnaW46IDA7CiAgICAgIHBhZGRpbmc6IDA7CiAgICAgIGxlZnQ6 IDA7CiAgICAgIHRvcDogMDsKICAgICAgd2lkdGg6IDEwMCU7CiAgICAgIGhlaWdodDogMTAwJTsK ICAgICAgcG9zaXRpb246IGZpeGVkOwogICAgfQoKICAgIHAgewogICAgICB0ZXh0LWFsaWduOiBj ZW50ZXI7CiAgICAgIGNvbG9yOiB3aGl0ZTsKICAgICAgZm9udC1zaXplOiAxLjVlbTsKICAgICAg Zm9udC13ZWlnaHQ6IDkwMDsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoKPCEtLSBB IGNlbnRlcmVkIHRleHQgb3ZlcmxheSB3aXRoIGEgcHVycGxlIGJhY2tncm91bmQgLS0+CjxkaXYg Y2xhc3M9Im92ZXJsYXkgY2VudGVyIj4KICA8cD4KICAgIFRoaXMgdGV4dCBpcyB0aGUgb25seTxi ciAvPgogICAgdGhpbmcgdGhhdCBzaG91bGQgYmU8YnIgLz4KICAgIHZpc2libGUgb24gYSBwdXJw bGU8YnIgLz4KICAgIGJhY2tncm91bmQuCiAgPC9wPgo8L2Rpdj4KCjwhLS0gQSBjZW50ZXJlZCBy b3RhdGluZyBzcXVhcmUgc3Bpbm5lciAtLT4KPGRpdiBjbGFzcz0iY2VudGVyIj4KICA8ZGl2IGNs YXNzPSJzcGlubmVyIj48L2Rpdj4KPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4=