PixiJS Ticker vs Page Visibility: Should the Ticker Auto‑Pause?

Question

Integration Boundary: PixiJS Ticker and Page Visibility API
Goal: Determine whether PixiJS should automatically pause its internal ticker when the page becomes hidden, to avoid unnecessary GPU and CPU usage while maintaining animation continuity when the tab is restored.
Constraints: The ticker currently delegates to requestAnimationFrame, and developers often mix it with manual loops or visibility change handling. Automatic pausing may cause animation jumps if the developer also manages updates externally.
Uncertainty: Does the PixiJS community prefer built‑in pause behavior, or should the responsibility remain explicit to developers? How does this affect performance on mobile browsers with aggressive throttling?
Specific Questions

What are the observable differences in frame timing and resource consumption when the PixiJS ticker auto‑pauses versus when it continues running during a hidden tab?
How does automatic pausing interact with common patterns of manual update loops (e.g., setInterval or custom tickers) that developers might still employ?
Should the PixiJS API expose a configurable option to enable or disable auto‑pause on visibility change, and what would be the default recommendation?

Tasadduq Burney · Answer

The Short Answer
PixiJS should not auto‑pause; developers must manually pause the ticker using the Page Visibility API.

Likely Explanation vs Confirmed Facts
Likely explanation: The community prefers explicit control so developers can decide when background updates are needed, avoiding unintended animation jumps.
Confirmed facts: Browsers throttle requestAnimationFrame when a tab is hidden, reducing execution frequency. The PixiJS ticker continues to accumulate elapsed time, so without a manual pause the first frame after restoration can produce a large delta that causes objects to teleport or physics to break.

Implementation Steps

Add a visibilitychange listener on document.
Inside the handler, call app.ticker.stop() when document.hidden is true, and app.ticker.start() when false.
Ensure any custom physics or logic updates also respect the pause state, or clamp delta times to a safe maximum.

Verification

Log the delta value in your ticker callback; a spike after returning to the tab indicates the need for a pause.
Monitor the Performance tab in Chrome DevTools to see that rAF callbacks drop to near‑zero when the page is hidden.
On a mobile device, compare battery drain with the ticker active versus paused during backgrounding.

Missing Diagnostic Detail
Please confirm whether your physics or game logic clamps delta time to a maximum value, as this would affect the necessity of a manual pause.

PixiJS Ticker vs Page Visibility: Should the Ticker Auto‑Pause?

Integration Boundary: PixiJS Ticker and Page Visibility API

Specific Questions

1 answer

The Short Answer

Likely Explanation vs Confirmed Facts

Implementation Steps

Verification

Missing Diagnostic Detail

Your perspective belongs here.

0 question comments