Bug 179789 - Style recomputation breaks animations that were paused on initial render
Summary: Style recomputation breaks animations that were paused on initial render
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 11
Hardware: Macintosh macOS 10.12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-11-16 11:39 PST by Aaron Sikes
Modified: 2017-11-17 15:51 PST (History)
6 users (show)

See Also:


Attachments
Reproduction (934 bytes, text/html)
2017-11-16 11:39 PST, Aaron Sikes
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Aaron Sikes 2017-11-16 11:39:30 PST
Created attachment 327089 [details]
Reproduction

If animation-play-state is "paused" for a given animation on page load, and a style recomputation happens before it is changed to running, the animation properties no longer seem to apply to the element.

See this reproduction (I've also attached a simple html file): https://jsfiddle.net/6c63z10z/10/
I'm on macOS 10.12, but a colleague of mine said he sees the same issue in Safari 11 on high sierra.

In Chrome, Firefox, both boxes start spinning at once, 500ms after page load.

In Safari, one of two things will happen:
- At 500ms after page load, the first box will snap to horizontal, and at 1000ms, the right box will start to spin
- At 500ms after page load, both boxes will snap to horizontal, and neither will begin spinning
Comment 1 Aaron Sikes 2017-11-16 11:43:02 PST
This is also present in Safari on iOSv11.1.1
Comment 2 Radar WebKit Bug Importer 2017-11-17 15:51:15 PST
<rdar://problem/35626238>