Skip to content


Transitions behave erratically and/or don't finish when browser window is blurred #885

shawnbot opened this Issue · 1 comment

2 participants


This one has bitten me in the ass a couple of times. It seems that when the browser window is blurred (when you switch to another browser tab or a different application altogether), both requested animation frames and setInterval callbacks stop executing. This shouldn't be a problem because d3's timer tracks elapsed time, but for some reason transitions that are either running when or started after the window is blurred rarely reach their end state and typically don't fire their "end" events.

I'm sorry that I don't have a test suite to reference, because this keeps coming up at really inconvenient times and I just haven't had a chance to build it. When I'm back at home and have some time I can, though. If anyone wants to start tracking it down, here's a place to start:

// I don't think that JavaScript executes until the window has focus,
// so it shouldn't be possible for this to initialize as false
var focused = true;
window.addEventListener("blur", function() {
  focused = false;
window.addEventListener("focus", function() {
  focused = true;

As frustrating as this may be I think this is probably the correct, expected behavior. My guess is that the transition end events are not firing because some other interval is creating a new transition which supersedes the old one. The browser typically keeps running setInterval, but at a reduced rate, when in a background tab. However requestAnimationFrame is paused completely. Although further complicating this is that D3 uses setTimeout when there is a delay longer than 24ms to the next timer callback, so it's possible that you might get a few callbacks in a background tab when using d3.timer / d3.transition.

If you can come up with a good, minimal example of confusing behavior with transitions in background tabs, we can work together to document that behavior better or tweak the internals to make it less confusing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.