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

• Component: CSS
• Status: NEW

[Roy]

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.

[Radar WebKit Bug Importer]

<rdar://problem/115126288>

[Yehonatan Daniv]

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