Off-screen rendering
content-visibility: auto
Chrome108
Edge108
Firefox130
Safari26
Features it needs
- content-visibilityNewly available
A virtualization library measures your list, unmounts the rows that scrolled out of view, and remounts them as they scroll back in. content-visibility: auto asks the browser to do the equivalent for layout and paint instead: it skips that work for a row until it is near the viewport, no measuring or remounting required. contain-intrinsic-size reserves the row's space up front, so the scrollbar does not jump around as rows come in and out of view.
When this applies
Rendering a long list where only the rows near the viewport need to cost anything.
The native approach
.row {
content-visibility: auto;
contain-intrinsic-size: auto 48px;
}When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You need the DOM node count itself reduced for a very large list. content-visibility still keeps every row in the DOM; it only skips the layout and paint work for the ones off-screen.
- You need data fetched in pages as the user scrolls. That is application logic a virtualization library's scroll callback gives you; content-visibility does not fetch anything.
- Your rows vary a lot in height and you cannot estimate contain-intrinsic-size well. A wrong estimate makes the scrollbar and scroll position jump when the real size is measured.
- You support Safari below version 26 or Firefox below 125. content-visibility: auto landed there long after Chrome 85, so on an older target the property is ignored and the long list costs exactly what it did before.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.
- Defer rendering heavy contentperformance