Bug 215853 – REGRESSION (r264856): updating easing on accelerated animation results in incorrect playback

• Component: Animations
• Status: RESOLVED FIXED

[Liam DeBeasi]

Created attachment 407301 [details]
Code Reproduction

Updating the easing on an accelerated animation causes the animation to abruptly jump to the end.

Steps to Reproduce:

1. Open the attached code reproduction on iOS 14/STP.
2. Click "Play". The blue square should translate from left to right linearly.
3. Click "Play, but switch easing after a timeout". The blue square should translate from left to right, pause after a timeout, updating its easing, and then abruptly jump to the end.

Expected Behavior:
I would expect that after updating the easing the animation would smoothly play to the end.

Actual Behavior:
Upon updating the easing, the animation jumps to the end.

Additional Info:

1. I was only able to reproduce this on iOS 14/STP (iOS 14 beta 6 and STP 112 as of writing).
2. I was only able to reproduce this with accelerated animations. Animating background or margin results in the correct playback.
3. While the code reproduction uses Web Animations, some of our users have also noticed this bug when using CSS Animations.

[Radar WebKit Bug Importer]

<rdar://problem/67815853>

[Antoine Quint]

The behavior was fixed to work correctly in r263506, the fix for bug 213495, but regressed in r264856, the fix for bug 214712.

[Simon Fraser (smfr)]

Does this affect any known websites?

[Liam DeBeasi]

Off the top of my head, I do not recall any websites affected by this. However, this bug does affected most mobile applications built with Ionic Framework.

Applications utilizing our modal component will see this bug occur. Here is an example: https://ionicframework.com/docs.

After opening the link above on STP 112, click the "Modal" option from the device simulation on the right (you may need to expand your window to see it). Clicking the "Open Modal" button will present a swipeable modal. If you drag the header of the modal down a little bit such that the modal does not close, you will be able to reproduce the issue.

For comparison, try the same example in Chrome (or look at how the native modal works on iOS when creating a new event in the Calendar app).

[Simon Fraser (smfr)]

Thanks for the input; just trying to prioritize this bug.

[Antoine Quint]

I have a fix for the attached test case, but it does not fix the Ionic modal component demo. Will look at that in depth.

[Antoine Quint]

The issue plaguing https://ionicframework.com/docs is probably a different issue. At least, it did not regress due to r264856, unlike the test case for this bug.

[Antoine Quint]

The issue with the modal dialog as demoed on https://ionicframework.com/docs was caused by r260360, the fix for bug 210526. I've filed bug 216308 to track that issue.

[Antoine Quint]

Created attachment 408330 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 408330 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=408330&action=review

Maybe also add a test for easing -> steps change.

> LayoutTests/webanimations/accelerated-animation-easing-update-after-pause.html:64
> +    await UIHelper.ensurePresentationUpdate();
> +    await UIHelper.renderingUpdate();

Are both of these necessary?

[Antoine Quint]

Created attachment 408342 [details]
Patch for landing

[EWS]

Committed r266789: <https://trac.webkit.org/changeset/266789>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 408342 [details].