javascript - JS / CSS Transition when Window not active

Question

I created a small slider where I set classes with JS every X seconds and do the animation with CSS Transition.

Now when the window is not active (for example you watch at another tab) and you come back there is a bit of chaos. After 1 transition-time-period the chaos is gone. It looks like some animations arnt run while on another window.

It looks like JS is running but not the CSS Transitions while the window is not active.

A simple example: https://jsfiddle.net/ugxkjr3s/

Keep the window inactive for a few seconds and you see the Div move faster. The left is set a few times with the function move. But CSS Transition only kicks in when the window is active again. So the Div moves to the end position all at once.

setInterval(move, 1000);
var left=0;

function move() {
    $("div").css("left", left);
  left=left+20;
}

Answer 1

The problem is that when the tab/window is hidden, browser doesn't redraw its content but the script continues to run, and when you switch back, it catches up at the first script execution that cause a redraw.

What you could do is use the Page Visibility API and stop script from running when tab/window is non visible