content-visibility
The content-visibility property skips rendering work for off-screen subtrees while preserving their find-in-page and accessibility semantics, combining containment with viewport awareness.
Definition
content-visibility: auto makes an element eligible for rendering skip when off-screen: layout, style, and paint for its subtree are deferred, and contain-intrinsic-size supplies a placeholder size so scrolling geometry stays stable. When the element approaches the viewport, rendering resumes with full semantics.
Context and scope
Applied to long documents — feeds, tables, documentation — where initial render cost of off-screen sections dominates. Works together with containment and intrinsic size hints.
Common misconceptions
- It is the same as display: none — skipped rendering preserves find-in-page, accessibility, and anchors, unlike display removal
- content-visibility alone is enough — a missing contain-intrinsic-size makes scrollbars jump as sections render
- It only helps very large pages — even mid-size lists benefit because style and layout for off-screen rows disappear
Anti-patterns
- Enabling auto without contain-intrinsic-size estimates and shipping scrollbar thrash on first scroll
- Applying it to the visible hero region, delaying the content users actually first see
- Nesting auto sections without measurements, compounding intrinsic-size error as users scroll deep
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
What it is
Rendering off-screen content costs the same as on-screen content unless the engine can skip it. content-visibility: auto declares that an element may skip its subtree rendering while off-screen while keeping it semantically present, and resume it just before it becomes visible.
How it works
The property relies on containment: the subtree cannot affect outside layout, so the engine can defer it. contain-intrinsic-size approximates the height the subtree would occupy, keeping the scrollable area stable. The intersection mechanism re-renders with some margin before visibility, avoiding pop-in at the viewport edge.
When to use it
Long feeds, changelogs, spec-like docs, and admin tables. Estimate intrinsic sizes from typical row heights; refine from measured heights once rendered, since browsers remember the last rendered size per element.
Pitfalls
Bad intrinsic-size estimates produce inaccurate scrollbars and anchor jumps. Printing and find-in-page force rendering, so those flows still pay full cost. Dynamic content changes above an auto section can shift its placeholder, so combine with scroll anchoring awareness.