Skip to content
This repository has been archived by the owner on Aug 19, 2022. It is now read-only.

Fix animation race condition on Safari #994

Closed
wants to merge 1 commit into from

Conversation

apiv
Copy link

@apiv apiv commented Jul 6, 2018

Fixes #192 :

On Safari, there is a race condition, in which the @keyframes are added to the <StyleSheet> on the page after the animationName style property is added to the styled element. Safari doesn't find the animation, and doesn't refresh those elements when the animation is added to the stylesheet.

Looking at the code, the update of the global stylesheet (src/components/style-sheet.js:43) is deferred by 0 milliseconds, while the addition of the style rule to the element is synchronous. This would cause the race condition described above.

This PR removes the debouncing from the CSS change listener, but leaves the debounce in componentDidMount intact.

@apiv apiv changed the title Make <StyleSheet /> updating synchronous to avoid race condition on Safari Fix animation race condition on Safari Jul 6, 2018
@coveralls
Copy link

Coverage Status

Coverage remained the same at 94.616% when pulling a2e3098 on apiv:master into da33b8f on FormidableLabs:master.

2 similar comments
@coveralls
Copy link

Coverage Status

Coverage remained the same at 94.616% when pulling a2e3098 on apiv:master into da33b8f on FormidableLabs:master.

@coveralls
Copy link

Coverage Status

Coverage remained the same at 94.616% when pulling a2e3098 on apiv:master into da33b8f on FormidableLabs:master.

@apiv
Copy link
Author

apiv commented Jul 9, 2018

Closing because the same problem is solved by #989

@apiv apiv closed this Jul 9, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants