[Webkit-unassigned] [Bug 213163] New: [Web Animations] Updating an Animation on an Element fails

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=213163

            Bug ID: 213163
           Summary: [Web Animations] Updating an Animation on an Element
                    fails
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: travis at createwithflow.com
                CC: dino at apple.com

Updating an Animation on an Element in Safari appears to fail when quickly updating animations.

This is critical important in the context of using Web Animations for UI Animation purposes, where a user may click rapidly on an Element. For example, if an animation is being used to back an on/off switch, then the visible state of the animation is critical.

Please watch this video: https://vimeo.com/428712386/f913056c2a

Demo
----
Please see this demo: https://codepen.io/createwithflow/pen/ExPyxex
Or download the same thing here: https://www.dropbox.com/s/gim2pq67ilzlzxo/UpdateAnimationBugSafari.zip?dl=0

This demo uses two animations (mirrored forward and reverse), both affecting the transform property.
When clicking the button the script uses the current time of an animation to determine the new current time for the next animation.
Expected Behaviour
------------------
When quickly clicking the button, the "next" animation should update and be set to a time (t) that mirrors the position of previous animation.
This should cause the element to appear to rotate "backwards" or "forwards" from its current position.

Actual Behaviour
----------------
In both Safari, and Safari Technology Preview 108, the element appears to jump to the wrong state before animating.
In some cases, the animation jumps to the animation's starting position after the animation completes.

Testing
-------
Chrome 83.0.4103.97 - Works as expected
Firefox 77.0.1 - Works as expected
Microsoft Edge 83.0.478.45 - Works as expected

Safari 13.1 – Does not work as Expected
Safari Technology Preview 108 (13.2) – Does not work as Expected

NOTES
-----
Safari and Safari Technology Preview both work when there is a decent amount of time between clicks. Though, it's hard to measure the threshold delta where the bug occurs.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200613/27988647/attachment.htm>