W3cubDocs

/Web APIs

Element: contentvisibilityautostatechange event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The contentvisibilityautostatechange event fires on any element with content-visibility: auto set on it when it starts or stops being relevant to the user and skipping its contents.

While the element is not relevant (between the start and end events), the user agent skips an element's rendering, including layout and painting, which can significantly improve page rendering speed. The contentvisibilityautostatechange event provides a way for an app's code to also start or stop rendering processes (e.g. drawing on a <canvas>) when they are not needed, thereby conserving processing power.

Note that even when hidden from view, element contents will remain semantically relevant (e.g. to assistive technology users), so this signal should not be used to skip significant semantic DOM updates.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js

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

Note: The event object is of type ContentVisibilityAutoStateChangeEvent.

Examples

js

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

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

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

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}

Specifications

Specification
CSS Containment Module Level 2
# content-visibility-auto-state-change

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
contentvisibilityautostatechange_event 108 108 110 No 94 No 108 108 No 73 No 21.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event