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

The ContentVisibilityAutoStateChangedEvent interface of the CSS Containment Module Level 2 is the event object for the contentvisibilityautostatechanged event, which 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.

This means that the user agent skips an element's rendering (including layout and painting) until it is needed, making page rendering much faster.

The contentvisibilityautostatechanged event provides a way for an app's code to start or stop rendering processes (e.g. drawing on a <canvas>) when they are not needed, thereby conserving processing power. It should be noted 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.

Event ContentVisibilityAutoStateChangedEvent


ContentVisibilityAutoStateChangedEvent() Experimental

Creates a new ContentVisibilityAutoStateChangedEvent object instance.

Instance properties

Inherits properties from its parent, Event.

skipped Read only Experimental

Returns true if the user agent is skipping the element's rendering, or false otherwise.


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

canvasElem.addEventListener('contentvisibilityautostatechanged', stateChanged); = "auto";

function stateChanged(event) {
  if (event.skipped) {
  } else {

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

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


CSS Containment Module Level 2
# content-visibility-auto-state-changed

Browser compatibility

BCD tables only load in the browser

See also