[Webkit-unassigned] [Bug 260981] New: [css-animations] Visually hidden elements will not paint when transform translated by @keyframes animation from transform:none

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=260981

            Bug ID: 260981
           Summary: [css-animations] Visually hidden elements will not
                    paint when transform translated by @keyframes
                    animation from transform:none
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Apple Silicon)
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: roypret at gmail.com

Created attachment 467512

  --> https://bugs.webkit.org/attachment.cgi?id=467512&action=review

A screen capture of the transform animation bug

The case: two boxes are absolutely positioned out of view inside a wrapper with overflow: hidden on it. One box will be animated back into view by keyframes animation by transform: translateY, the other with a property that triggers the layout (like top, bottom etc.). 

The issue: the box being animated with the transform property does not get painted. However, when both animations run simultaneously, both elements will be painted. Important to add is that this bug only affects transform animations whose initial state is transform: none. When the initial state is transform: translateY(0), this animation works as expected and the box will be painted independently. 

A developer might want to opt for transform: none as an initial state. One of these reasons is that transform creates a new stacking context and when positioning with position: fixed or sticky, this might lead to undesired behavior. 

I experience this issue in Safari 16.6 (18615.3.12.11.2), on Mac OS 13.5.1, as well on an iPhone 7 (iOS 15.7.8).

Below is a minimal demo to demonstrate this issue. I included a video in the attachment which shows this demo.

https://codepen.io/roye7777777/pen/PoxXaJW

This issue might be similar to https://bugs.webkit.org/show_bug.cgi?id=150161 but the demo on that page does not seem to work for me.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230831/8170de1e/attachment.htm>