Element: contentvisibilityautostatechange event
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.
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.
addEventListener("contentvisibilityautostatechange", (event) => { })
oncontentvisibilityautostatechange = (event) => { }
Event type
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) {
// …
}
Specifications
| Specification |
|---|
| CSS Containment Module Level 2 # content-visibility-auto-state-change |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
contentvisibilityautostatechange event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
See also
ContentVisibilityAutoStateChangeEvent- CSS Containment
- The
content-visibilityproperty - The
containproperty