Animation Ghosting with animation-timeline on 120HZ ProMotion Devices

On iOS Devices with ProMotion (120HZ) if you animate Elements on your Page with animation-timeline you get Ghosting Effects.

You can not see the Ghosting with a Simulator or on Screenshots, only on real Devices.

To Reproduce I made a Minimal Example: https://codesandbox.io/p/sandbox/120hztest-xrwgtc

When you scroll quickly on the Page with an iOS 120HZ Device (https://en.wikipedia.org/wiki/List_of_smartphones_with_a_high_refresh_rate_display) you will see ghosting on the Top of the right Element (animation-timeline) and no ghosting on the other animated Element.

(I edited the Screenshot, to Illustrate how the Effect looks like, since it is only visible on the real Display)

If I use transform-origin: top; instead of transform-origin: bottom; I get better Performance.

Hello. Thanks for reporting this issue.

It would help if you could file a bug report about this, preferably on the public WebKit bug tracker at bugs.webkit.org, or through Feedback Assistant.

If you elect to do so, please leave the bug number here.

Animation Ghosting with animation-timeline on 120HZ ProMotion Devices
 
 
Q