Adds a CSS property called content-visibility, which allows automatic or script management of content visibility. When hidden, the element's contents (subtree or replaced element contents) are not drawn or hit-tested and have CSS containment applied, allowing for rendering optimizations. The 'auto' keyword allows for the user-agent to manage content visibility based on proximity to the viewport, whereas 'hidden' keyword allows full script control of content visibility.
Motivation
Rich content that appears below the fold of the page tends to decrease performance since most aspects of rendering are required for content even if it is off-screen. This can be mitigated to some extent by the developer via virtualization of content, and by the user agent heuristically optimizing away work when possible. Content-visibility property is an easy-to-adopt feature that makes it easy for developers and user agents to to reduce the performance burden of off-screen content.
Documentation
Specification
Status in Chromium
Enabled by default (tracking bug) in:
- Chrome for desktop release 85
- Chrome for Android release 85
- Android WebView release 85
Consensus & Standardization
Owners
Intent to Prototype url
Intent to Prototype threadSearch tags
content-visibility, content visibility, display lock, display locking, rendersubtree,Last updated on 2020-11-19