ContentVisibilityAutoStateChangeEvent

Baseline 2024

Newly available

Since ⁨September 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

TheContentVisibilityAutoStateChangeEvent interface is the event object for thecontentvisibilityautostatechange event, which fires on any element withcontent-visibility: auto set on it when it starts or stops beingrelevant to the user andskipping 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.This can significantly improve page rendering speed.Thecontentvisibilityautostatechange 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.

Constructor

ContentVisibilityAutoStateChangeEvent(): Creates a newContentVisibilityAutoStateChangeEvent object instance.

Instance properties

Inherits properties from its parent,Event.

skippedRead only: Returnstrue if the user agent is skipping the element's rendering, orfalse otherwise.

Examples

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) {  // …}