My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition.
However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, there seems to be some chaos happening. It takes about 1 transition-time-period for everything to settle down. It appears that certain animations are not being run while the window is inactive.
From what I can tell, the JS continues to run but the CSS Transitions remain idle when the window loses focus.
For instance, you can see an example here: https://jsfiddle.net/ugxkjr3s/
If you keep the window inactive for a few seconds, you'll notice that the Div moves faster when it regains focus. The left position of the Div is updated multiple times with the move function, but the CSS Transition only takes effect once the window becomes active again. This causes the Div to jump to its final position all at once.
setInterval(move, 1000);
var left=0;
function move() {
$("div").css("left", left);
left=left+20;
}