Bug 250919

Summary:

Overlaid elements with rotating CSS animations glitch & break layer order

Product:

WebKit

Reporter:

jonrh <dev>

Component:

Compositing

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

graouts, karlcow, mattwoodrow, simon.fraser

Priority:

Keywords:

BrowserCompat

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
Minimal reproduction of the bug	none

jonrh

Reported 2023-01-20 15:41:10 PST

Created attachment 464584 [details] 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

Attachments
Minimal reproduction of the bug (1.66 KB, text/html) 2023-01-20 15:41 PST, jonrh	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 2023-01-21 20:22:14 PST

This is about 3D transform interop.

Matt Woodrow

Comment 2 2023-01-22 16:59:26 PST

This has been fixed by bug 248282 *** This bug has been marked as a duplicate of bug 248282 ***

Note You need to log in before you can comment on or make changes to this bug.