JavaScript Element contentvisibilityautostatechange Event

What You’ll Learn

The contentvisibilityautostatechange event fires on elements with content-visibility: auto when the browser starts or stops skipping their contents. Learn event.skipped, how to pause canvas or timers off-screen, addEventListener vs oncontentvisibilityautostatechange, and five try-it labs.

Introduction

Long pages often include heavy sections (charts, canvases, big lists) that sit far below the fold. CSS content-visibility: auto lets the browser skip layout and paint for those sections until they become relevant to the user—usually when they near the viewport.

contentvisibilityautostatechange is the JavaScript companion: when skipping starts or stops, your code can pause or resume expensive work and save CPU and battery.

Understanding contentvisibilityautostatechange

An instance event that answers: “Did the browser just start or stop skipping this content-visibility: auto element’s contents?”

• Requires content-visibility: auto on the element.
• Fires when relevance changes and skipping starts or stops.
• Event type — ContentVisibilityAutoStateChangeEvent.
• Key property — skipped (true = rendering skipped).
• Baseline Newly available on MDN (since September 2024).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("contentvisibilityautostatechange", (event) => { });

oncontentvisibilityautostatechange = (event) => { };

Event type

A ContentVisibilityAutoStateChangeEvent.

Event properties

CSS partner

.panel {
  content-visibility: auto;
  contain-intrinsic-size: 300px; /* optional size hint while skipped */
}

🔁 Skip / Resume Flow

1. Element has content-visibility: auto.
2. Browser decides contents are not relevant (for example far off-screen) and skips rendering.
3. contentvisibilityautostatechange fires with event.skipped === true — pause heavy JS work.
4. When the element becomes relevant again, the event fires with skipped === false — resume work.

Contents can still remain available to find-in-page, focus, and assistive technology even while skipped for painting—treat this as a performance signal, not a “delete the DOM” signal.

⚖️ vs IntersectionObserver

Examples Gallery

Examples follow MDN Element: contentvisibilityautostatechange event. Scroll panels with content-visibility: auto in and out of view to see skipped flip.

const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

stopCanvasUpdates
startCanvasUpdates

const panel = document.getElementById("panel");

panel.oncontentvisibilityautostatechange = (event) => {
  console.log("skipped:", event.skipped);
};

panel.style.contentVisibility = "auto";

skipped: true
skipped: false

const panel = document.getElementById("panel");
const log = document.getElementById("log");

panel.addEventListener("contentvisibilityautostatechange", (event) => {
  log.textContent += "skipped=" + event.skipped + "\n";
});

panel.style.contentVisibility = "auto";

skipped=true
skipped=false

const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
const status = document.getElementById("status");
let raf = 0;
let t = 0;

function draw() {
  t += 0.05;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#2563eb";
  ctx.beginPath();
  ctx.arc(80 + Math.sin(t) * 40, 40, 16, 0, Math.PI * 2);
  ctx.fill();
  raf = requestAnimationFrame(draw);
}

function start() {
  if (!raf) raf = requestAnimationFrame(draw);
  status.textContent = "Drawing…";
}

function stop() {
  cancelAnimationFrame(raf);
  raf = 0;
  status.textContent = "Paused (skipped)";
}

canvas.addEventListener("contentvisibilityautostatechange", (event) => {
  if (event.skipped) stop();
  else start();
});

canvas.style.contentVisibility = "auto";
start();

Drawing…
Paused (skipped)

const panel = document.getElementById("panel");
const out = document.getElementById("out");
let n = 0;
let id = null;

function start() {
  if (id) return;
  id = setInterval(() => {
    n += 1;
    out.textContent = "ticks: " + n + " (running)";
  }, 500);
}

function stop() {
  clearInterval(id);
  id = null;
  out.textContent = "ticks: " + n + " (paused)";
}

panel.addEventListener("contentvisibilityautostatechange", (event) => {
  if (event.skipped) stop();
  else start();
});

panel.style.contentVisibility = "auto";
start();

ticks: 12 (running)
ticks: 12 (paused)

🚀 Common Use Cases

• Pausing requestAnimationFrame / canvas drawing when a chart scrolls away.
• Stopping polling or WebSocket-driven UI updates for off-screen panels.
• Reducing CPU on long article pages with many interactive widgets.
• Pairing with contain-intrinsic-size for smoother scroll layout.
• Progressive enhancement: ignore the event on older browsers and keep work running.

🔧 How It Works

📝 Notes

• MDN: Baseline Newly available (since September 2024).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Listen on the element that has content-visibility: auto (direct listener recommended).
• Do not skip significant semantic / a11y DOM updates when skipped is true.
• Related learning: compositionupdate, contextmenu, addEventListener(), JavaScript hub.

💡 Best Practices