Bug 215853 - REGRESSION (r264856): updating easing on accelerated animation results in incorrect playback
Summary: REGRESSION (r264856): updating easing on accelerated animation results in inc...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: All Unspecified
: P2 Normal
Assignee: Antoine Quint
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-08-26 09:14 PDT by Liam DeBeasi
Modified: 2020-09-09 11:12 PDT (History)
6 users (show)

See Also:


Attachments
Code Reproduction (2.47 KB, text/html)
2020-08-26 09:14 PDT, Liam DeBeasi
no flags Details
Patch (8.33 KB, patch)
2020-09-09 09:46 PDT, Antoine Quint
no flags Details | Formatted Diff | Diff
Patch for landing (11.51 KB, patch)
2020-09-09 10:43 PDT, Antoine Quint
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2020-08-26 09:14:57 PDT
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.
Comment 1 Radar WebKit Bug Importer 2020-08-26 10:56:27 PDT
<rdar://problem/67815853>
Comment 2 Antoine Quint 2020-08-27 07:58:02 PDT
The behavior was fixed to work correctly in r263506, the fix for bug 213495, but regressed in r264856, the fix for bug 214712.
Comment 3 Simon Fraser (smfr) 2020-08-27 14:19:03 PDT
Does this affect any known websites?
Comment 4 Liam DeBeasi 2020-08-27 15:28:09 PDT
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).
Comment 5 Simon Fraser (smfr) 2020-08-27 15:47:38 PDT
Thanks for the input; just trying to prioritize this bug.
Comment 6 Antoine Quint 2020-09-09 04:46:29 PDT
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.
Comment 7 Antoine Quint 2020-09-09 05:14:59 PDT
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.
Comment 8 Antoine Quint 2020-09-09 05:41:31 PDT
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.
Comment 9 Antoine Quint 2020-09-09 09:46:08 PDT
Created attachment 408330 [details]
Patch
Comment 10 Simon Fraser (smfr) 2020-09-09 09:53:28 PDT
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?
Comment 11 Antoine Quint 2020-09-09 10:43:40 PDT
Created attachment 408342 [details]
Patch for landing
Comment 12 EWS 2020-09-09 11:12:20 PDT
Committed r266789: <https://trac.webkit.org/changeset/266789>

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