PixiJS Ticker delta time spikes during tab backgrounding

Question

Ticker Timing and Tab Visibility
The PixiJS Ticker utilizes requestAnimationFrame to manage the update loop, calculating a delta value to ensure frame-rate independent movement. This mechanism relies on the browser's high-resolution timestamp to maintain synchronization between logic updates and rendering.
A specific challenge arises when the browser tab is backgrounded. Because the browser throttles or pauses requestAnimationFrame, the elapsed time between the last frame before suspension and the first frame upon refocusing can result in an exceptionally high delta value.
In physics-heavy simulations, these spikes can lead to "tunneling," where objects move so far in a single frame that they bypass collision boundaries entirely.

What is the recommended configuration for clamping the Ticker.delta to prevent physics instability after a tab refocus?
  Does PixiJS provide a built-in mechanism to reset or ignore the accumulated time during periods of inactivity?

Tasadduq Burney · Answer

Answer
Clamp the delta value to a maximum (e.g., 50 ms) or use the built‑in minFPS setting, and pause the ticker while the tab is hidden.
Confirmed facts

PixiJS Ticker derives deltaMS from the timestamp difference between successive requestAnimationFrame callbacks.
  When a tab is backgrounded, browsers throttle requestAnimationFrame to ~1 fps, so the elapsed time can jump to ~1000 ms, producing a delta spike.
  The ticker does not automatically clamp or smooth this value.

Likely explanation
The spike occurs because the ticker continues to accumulate real‑world time while the render loop is paused; the first frame after refocus reports the whole pause as a single delta.
Steps to mitigate

Listen to the Page Visibility API:
  document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    ticker.stop();   // halts the render loop
  } else {
    ticker.start();  // resumes normal RAF‑driven updates
  }
});
  If you prefer to keep the ticker running, bound the delta:
  // Set a minimum FPS (e.g., 30) → max delta ≈ 33 ms
ticker.minFPS = 30;
// Or manually clamp inside the tick listener
ticker.add((deltaMS) => {
  const clamped = Math.min(deltaMS, 50); // 50 ms ≈ 20 fps cap
  // use clamped for physics updates
});

Missing diagnostic detail
Are you using the ticker’s default auto‑start loop (ticker.autoStart === true) or manually calling ticker.update() with your own timestamp? The stop()/start() approach only works when the ticker drives its own loop.

PixiJS Ticker delta time spikes during tab backgrounding

Ticker Timing and Tab Visibility

1 answer

1 question comment

Answer

Confirmed facts

Likely explanation

Steps to mitigate

Missing diagnostic detail

Your perspective belongs here.