CSS-native virtual scrolling
CSS content-visibility provides native virtual scrolling without JavaScript, Hladky shows Web Conferences AmsterdamTL;DW
- CSS contain and content-visibility eliminate layout thrashing without JavaScript—contain shields containers so layout changes don't trigger recalculation of the entire page.
- content-visibility: auto is native virtual scrolling: browser completely removes off-screen elements from style recalculation, layout, and paint processing.
- Contain layout has a design downside—it affects z-index and stacking context, causing overlapping elements to break; content-visibility avoids this issue.
- Contain paint reduces paint surface by cutting off overflow content; content-visibility requires explicit height dimensions but delivers massive performance gains.
- Measured with DevTools: zoom 0.1% in and out while recording to isolate layout and paint work; deeply nested boxes with margin animations show layout thrashing clearly.
- Adding content-visibility: auto and fixed heights to images, SVGs, and tiles reduced layout tasks from severe spikes to nearly zero with minimal CSS changes.
- Content-visibility supported everywhere except IE; contain paint/layout supported cross-browser since Safari shipped it recently.
- Real-world demo: infinite-scroll website went from constant red recalculate-style spikes to clean profile by applying content-visibility auto and contain layout to tiles.
- Contain strict combines layout, paint, and size but is annoying to use; content visibility easier to apply and equally performant without design side effects.
- Off-screen paint of images (e.g., in infinite scroll) completely disappears when content-visibility applied—no paint work triggered for invisible content beyond viewport.
TL;DW
- CSS contain and content-visibility eliminate layout thrashing without JavaScript—contain shields containers so layout changes don't trigger recalculation of the entire page.
- content-visibility: auto is native virtual scrolling: browser completely removes off-screen elements from style recalculation, layout, and paint processing.
- Contain layout has a design downside—it affects z-index and stacking context, causing overlapping elements to break; content-visibility avoids this issue.
- Contain paint reduces paint surface by cutting off overflow content; content-visibility requires explicit height dimensions but delivers massive performance gains.
- Measured with DevTools: zoom 0.1% in and out while recording to isolate layout and paint work; deeply nested boxes with margin animations show layout thrashing clearly.
- Adding content-visibility: auto and fixed heights to images, SVGs, and tiles reduced layout tasks from severe spikes to nearly zero with minimal CSS changes.
- Content-visibility supported everywhere except IE; contain paint/layout supported cross-browser since Safari shipped it recently.
- Real-world demo: infinite-scroll website went from constant red recalculate-style spikes to clean profile by applying content-visibility auto and contain layout to tiles.
- Contain strict combines layout, paint, and size but is annoying to use; content visibility easier to apply and equally performant without design side effects.
- Off-screen paint of images (e.g., in infinite scroll) completely disappears when content-visibility applied—no paint work triggered for invisible content beyond viewport.
Michael Hladky measures layout and paint costs in Chrome DevTools, then shows how `contain: layout` blocks relayout cascades, `contain: paint` shrinks paint surface, and `content-visibility: auto` removes off-screen elements from the render pipeline entirely — cutting layout and paint spikes to near-zero on an infinite-scroll page with one CSS rule per tile.