Back to the catalog

Tab visibility

Async, Observers & Data

document.visibilityState and the visibilitychange event

Baseline widely availablederived from web-features, captured 2026-09-06
  • Chrome33
  • Edge12
  • Firefox18
  • Safari7

Features it needs

These libraries wrap document.visibilityState with framework-friendly plumbing around a value the browser already exposes. Reading it directly tells you whether the tab is the one the person is currently looking at, useful for pausing polling, video, or animation when it isn't.

When this applies

Pausing or resuming work, such as polling or video playback, based on whether the tab is visible.

The native approach

document.visibilityState and the visibilitychange event
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") pausePolling();
  else resumePolling();
});
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • You need a framework hook's re-render-on-change ergonomics rather than an event listener you manage yourself.
  • You need to distinguish a window occluded by another window from a genuinely backgrounded tab. visibilityState only reports the latter.

Building it

This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.

Packages this covers

Minified and gzipped, captured 2026-09-06.