Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pause / Resume a CSS animation on tab change #4202

Closed
rahulVerma27 opened this Issue Oct 22, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@rahulVerma27
Copy link

rahulVerma27 commented Oct 22, 2018

Description

I was creating a code which pauses / resumes a CSS animation when the browser tab is changed.

I wanted the animation to stop when the current browser tab is inactive and restart when the current tab is active again

I used the focus and blur events to achieve this, and they worked as expected. But, the .css() method failed to work, which was supposed to stop the animation. Here is a detailed discussion on this issue

I tested the code in Google Chrome v70.0.3538.67 and in Firefox Quantum v62.0.3 (32-bit)

jQuery version used: 3.3.1

Link to test case:

JSFiddle

@timmywil

This comment has been minimized.

Copy link
Member

timmywil commented Oct 22, 2018

Thanks for opening an issue. After review, .css is doing its job. The confusion seems to be related to how focus works on iframes. Note that changing tabs does not necessarily trigger blur on an iframe window, but your example actually works for me in Chrome and Firefox. I still might consider the visibility api rather than relying on window focus. Regardless, I don't see a jQuery issue.

@timmywil timmywil closed this Oct 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.