JavaScript Element contentvisibilityautostatechange Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word CONTENTVISIBILITYAUTOSTATECHANGE

Definition

In JavaScript, fires on an element with content-visibility: auto when it starts or stops being relevant to the user and the browser skips (or resumes) rendering its contents (MDN).

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for contentvisibilityautostatechange. Start with this line.

JavaScript
addEventListener("contentvisibilityautostatechange", fn)
CallWhat it does
addEventListener("contentvisibilityautostatechange", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("contentvisibilityautostatechange", …) — no import required.

Library declarations
JavaScript
addEventListener("contentvisibilityautostatechange", fn)

Parameters

ParameterDescription
content-visibility: autoRequired. Enables skip + this event
HandlerRequired. React to skipped
Handler propOptional. oncontentvisibilityautostatechange

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Pause Canvas Updates (MDN)

Start or stop canvas work from event.skipped.

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

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

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

How It Works

  1. Listen first. Attach the handler to the canvas element.
  2. Enable auto. Set contentVisibility = "auto".
  3. Read skipped. true means the UA is skipping rendering.
  4. Toggle work. Stop drawing when skipped; resume when not.

Example 2 — Feature Detect

Baseline Newly available — guard older engines.

JavaScript
const supported =
  typeof ContentVisibilityAutoStateChangeEvent === "function" ||
  "oncontentvisibilityautostatechange" in document.documentElement;

console.log(supported);

if (!supported) {
  console.log("Use always-on updates or another visibility strategy");
}
Try It Yourself

How It Works

  1. Check the event interface or the on… handler property.
  2. Expect gaps on older browsers (Newly available since Sep 2024).
  3. Provide a fallback — keep updates running, or use another visibility approach.
  4. Then opt in to pause/resume when supported.

Example 3 — Pause a Timer When Skipped

Same pattern as canvas — stop interval work while skipped.

JavaScript
const box = document.getElementById("box");
let id = 0;

function start() {
  if (!id) id = setInterval(() => console.log("tick"), 1000);
}
function stop() {
  clearInterval(id);
  id = 0;
}

box.addEventListener("contentvisibilityautostatechange", (e) => {
  if (e.skipped) stop();
  else start();
});
box.style.contentVisibility = "auto";
start();
Try It Yourself

How It Works

  1. Own the timer. start / stop wrap setInterval.
  2. Wire the event. Toggle from e.skipped.
  3. Set auto. Required for the browser to skip and fire.
  4. Start once. Begin work; the event keeps it in sync with relevance.
Compatibility

Browser Support

Element contentvisibilityautostatechange is Baseline Newly available (MDN: since September 2024). Feature-detect before relying on it.

✓ Baseline 2024 · Newly available

contentvisibilityautostatechange

Signals when content-visibility: auto starts or stops skipping an element's contents.

New Newly available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
contentvisibilityautostatechange Newly available

Bottom line: Use in modern evergreen browsers with a feature detect. Pair with content-visibility: auto and pause only expensive rendering work.

Frequently Asked Questions

It fires on an element with content-visibility: auto when the browser starts or stops skipping that element's contents because relevance to the user changed (MDN).
No. MDN marks it as Baseline Newly available (since September 2024). It is not Deprecated, Experimental, or Non-standard.
A ContentVisibilityAutoStateChangeEvent. The key property is skipped: true when the user agent is skipping the element's rendering, false when it is not.
Set content-visibility: auto on the element (stylesheet or element.style.contentVisibility = "auto"). Without auto, this event does not apply.
No. MDN: contents stay semantically relevant (for example for assistive technology). Pause expensive rendering such as canvas loops or timers — do not drop meaningful accessibility updates.
Directly on the element that has content-visibility: auto (MDN canvas example). Do not rely only on a parent bubbling listener.

Next: contextmenu

Learn the Element event fired when a context menu is requested.

contextmenu tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element compositionupdate Event JavaScript Element contextmenu Event