Bug 260981

Summary: [css-animations] Visually hidden elements will not paint when transform translated by @keyframes animation from transform:none
Product: WebKit Reporter: Roy <roypret>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: maggotfish, tombigel, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
URL: https://codepen.io/roye7777777/pen/PoxXaJW
Attachments:
Description Flags
A screen capture of the transform animation bug none

Description Roy 2023-08-31 11:21:26 PDT 
Created attachment 467512 [details]
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.
Comment 1 Radar WebKit Bug Importer 2023-09-07 11:22:17 PDT 
<rdar://problem/115126288>
Comment 2 Yehonatan Daniv 2024-04-17 08:03:21 PDT 
I have a similar issue, I think it's the same one, here is a repro: https://jsbin.com/bidolegogu/edit?html,css,output

If you hover the "working" div and wait for the animation to play you'll see both p elements animating in and out.

If you hover the "broken" div, which has the inner p elements initially translated with `translate: -100%`, you'll see that the left one paints, but the right one does not.

The two divs clip their children with `overflow: clip`, and the animation is on the children, doing `transform: translateX(...)`, moving them into view.

This is working fine on CH/FF.

Still broken on SF 17.4.1.

~Y