Strange jquery behaviour on page: animation paused when tab hidden?

Question

I've got something odd happening across multiple sites and I can't pinpoint the cause or solution.

have a look at this: http://jsfiddle.net/s5dnU/

Open it in another tab, go back to your original tab and do whatever for about 5 - 10 mins. When you come back to the code, the cycling will suddenly try and play catch up with the cycles that have gone while you weren't on the tab. this also means you will have text overlapping and the timing will be really off (all running together one after another without any delay).

It happens in IE, Chrome and FireFox. I've used this or similar on several sites and it always reproduces. I've only noticed it recently though, so I'm not sure if this is a bug in the latest release of jQuery.

Has anyone seen this before or could point me in the right direction for a fix?

Thanks

Answer 1

turns out it was a glitch in jquery. They've released a new patch that has solved the issue.

Answer 2

you could stop the animation on $(window).blur and restart it on $(window).focus

Answer 3

Try clearing the animation queue before running the next transition

with jquery, they are all queued up, but not executed, while the tab does not have focus. Then, when you go back to that tab, they all try to animate at once. Clearing the queue should prevent the backlogging.