Bug 263996 – REGRESSION (iOS 17): Animation flicker with multiple accelerated animations and direction change

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Liam DeBeasi]

Created attachment 468433 [details]
Code reproduction

Starting in iOS 17.0 having multiple accelerated animations on the same element causes a flicker when changing the direction.

Steps to reproduce:

1. Open attached reproduction on a device running iOS 17.0+.
2. Tap "Run Animation". Observe that the square translates from the bottom of the screen to the top.
3. Drag the red square. The square should move with your pointer.
4. Release your pointer. Observe that the square jumps to the top of the screen before returning to its previous position and translating to the top of the screen.

Expected Behavior:

I expect the square to remain in its last position before translating to the top of the screen when I remove my pointer.

Actual Behavior:

The square jumps to the top of the screen, then returns to its last position before translating to the top of the screen when I remove my pointer.

Other Info:
- I am able to reproduce this starting on iOS 17.0
- I can reproduce this on Safari 17 on macOS

[Radar WebKit Bug Importer]

<rdar://problem/117815004>

[Alexey Proskuryakov]

FWIW, I'm observing many inconsistent behaviors on this test case, and it doesn't work in Chrome at all, ao this is a little confusing.
- sometimes it starts animating from bottom to top repeatedly
- sometimes is also flickers when doing that
- it follows mouse pointer even without clicking, but only to half of the screen

But I don't think that I can see the reported actual behavior with macOS 14.2 beta.

[Liam DeBeasi]

Created attachment 468449 [details]
Simplified test case

Here's a simplified test case so you can compare the behavior across browsers.

Steps to reproduce:

1. Open test case on Safari 17 for iOS or macOS.
2. Click "Run Animation". Observe that the square translates from the bottom of the screen to the top.
3. After 500ms, observe that the square jumps half way down the screen.
4. After another 500ms, observe that the square briefly flickers at the top of the screen before animating up from the middle of the screen.

I expect the square to not briefly flicker at the top of the screen in step 4.

[Antoine Quint]

On Sonoma, this used to work as of 262485@main but fails as of 266113@main (ToT as of this writing).

[Antoine Quint]

I think I must have been confused, I'm now seeing the same behavior on Sonoma and Ventura.

I did some digging and the behavior of the "simplified test case" changed in this way:

- prior to 262875@main things looked as expected
- 262875@main regressed the animation such that there would not be an animation for the second part
- 265909@main fixed that regression but the flicker issue appears

[Antoine Quint]

As it stands with a ToT build (273181@main) the flashing happens most of the time but not always. Will be looking at this next.

[Antoine Quint]

This does not happen with threaded animation resolution enabled.

[Antoine Quint]

I have a fix for this but writing a test might be tricky due to the very time-sensitive nature of this bug which only appears for a single frame.

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/25540

[EWS]

Committed 275773@main (9d57f1f6519a): <https://commits.webkit.org/275773@main>

Reviewed commits have been landed. Closing PR #25540 and removing active labels.