RESOLVED CONFIGURATION CHANGED 170841
animation-play-state: paused does not work when animation includes transform3d 
https://bugs.webkit.org/show_bug.cgi?id=170841
Summary animation-play-state: paused does not work when animation includes transform3d
Hansol Kim
Reported 2017-04-13 19:44:15 PDT
In iOS 10.3.1 Safari, animation-play-state: paused does not work when animation includes a transform3d. While searching I came across a report posted on Apple Communities: https://discussions.apple.com/thread/6762081?start=0&tstart=0 The OP has posted 2 jsfiddle links for tests which I think demonstrate this issue clearly, so I will post the links here directly. Example with normal transform (2d): http://jsfiddle.net/gdementis/p2MgM/3/ Example with transform3d: http://jsfiddle.net/gdementis/HykgE/2/ When tested on desktop Safari 10.1 (12603.1.30.0.34), both examples work properly when clicking on Stop to pause the animation. When tested on iPhone Safari, the Stop button on the 2nd jsfiddle does not stop the animation. I discovered this bug when working on my own project where I had used animation-play-state: paused on an element that runs a repeating animation that has scale() transform, and the pause did not work as expected only on iPhone.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-04-13 22:36:23 PDT
<rdar://problem/31622658>
Michael Duve
Comment 2 2018-02-09 07:20:24 PST
Created a jsfiddle as well, when I stumbled upon this bug ticket, while I was starting to create my own https://jsfiddle.net/dazlious/ct8zejnu/5/ Needs to be fixed
Antoine Quint
Comment 3 2023-05-10 00:50:34 PDT
Both animations pause in JSFiddle as expected with iOS 16.
Note You need to log in before you can comment on or make changes to this bug.