FF issue with hovering on anchor rotator

Question

Ok so this bug is very weird here is my code, you can actually see this bug happening using fiddler

http://jsfiddle.net/LLMUX/13/

the code works fine as long as you don't go to a different tab. the code is a rotator. if you hover the links it will show the block the hover is assigned, then once you hover off it will resume the main rotation

produce the bug - have the fiddler page open, you could copy the code into a file and try it, same thing happens - with the fiddler page you can hover or whatever you want or do nothing - open another tab, do whatever for a few seconds 5-10 should do - go back to the fiddler page - chances are you will see 2 blocks showing then eventually 1 goes away

this only happens if you are coming back from a different tab, if you stay on the page this will NEVER happen. I tried is safari, it did not happen I tried it on IE9 it did not happen! I tried this on FF 7 and 8, both with this problem.

If anyone have any idea on why this happens it would be greatly appreciated

Edit - might not happen 100% of the time

Answer 1

I bet your problem is the same as this: Jquery setInterval too fast when coming from another tab

Browsers try to minimize the performance hit of web pages being active when the user doesn't interact with them. One such optimization is setTimeout/setInterval "clamping": Firefox 5+ doesn't fire timeouts faster than once in 1s.

I see that your code only uses a 1300ms interval, but I guess jQuery's animation deals with being in background in a different way than your setInterval-based code does, but I'm not up to debugging this to know the exact reason it works like that.

See also Background Tab Animation and jQuery

(edit) and if I'm right, the way I'd try fixing it is to stop using setInterval to drive animation and instead to always use the jQuery's 'finished' callbacks to schedule the next slide via setTimeout: fadeIn --> wait 1s --> fade out --> fade in.