ProLoser/AnythingSlider — Issue #217: rapid animation on window resume/focus
Author: eriteric
Created: 2011-11-22 15:01:29+00:00
State: open

I know a lot of other people are having this error too. I've even seen this behavior on some prevalent websites.
There is a relatively new browser feature that has been implemented lately called requestAnimationFrame(). jQuery team tried implementing some features using it a few months ago and had to back away from it as it was too buggy cross browser.

The symptoms are basically this: When you leave a browser window open in the background (out of focus) with an auto-playing slideshow on the page, and resume focus a while later (duration of blur needed depends on the timing of the individual slider) the animations will "stack up" and fire rapidly one after the other, resulting in one crazy looking slideshow.

Found this info in jQuery FadeIn() API docs:
"Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation. "

Any lead on this? Much appreciated!