CSS content-visibility: Browser Support, Values, Issues

What is content-visibility?

content-visibility is a CSS property defined in the W3C CSS Containment Module Level 2. It lets browsers skip layout, style, and paint work for elements that are off-screen, which speeds up initial page load on long pages. It accepts three keyword values: visible, hidden, and auto.

Which browsers does content-visibility support?

content-visibility now works across all three major browser engines. Chrome and Edge picked it up first, Safari joined when WebKit shipped support in Safari 18, and Firefox flipped the flag on by default in Firefox 125.

What values does content-visibility accept?

content-visibility accepts three keyword values. Each one changes whether the browser lays out and paints the element, whether the element keeps its rendered state, and whether the element stays reachable to find-in-page and screen readers.

• visible: The default value. The element renders normally, the browser lays it out and paints it whether it is on-screen or off-screen, and no containment is applied. Use visible to opt a single child out of a wrapper that sets content-visibility on the parent.
• hidden: Skips rendering completely and removes the contents from the layout tree, similar to display: none for layout cost. Unlike display: none, the element stays in the DOM and the accessibility tree, and the browser keeps the rendered state cached for a quick re-display when you flip the value back to visible.
• auto: Skips rendering only while the element is off-screen, and renders it as it nears the viewport. The element keeps layout, style, and paint containment, stays in the accessibility tree, and remains reachable to find-in-page, tab navigation, and anchor links. auto is the value almost every long page should use.

What are the performance benefits of content-visibility?

content-visibility: auto removes the cost of laying out and painting off-screen sections on the first frame. The web.dev case study reports rendering time on a long travel article dropping from 232 ms to 30 ms, roughly a 7x speed-up on initial render.

• Faster first paint: The browser skips the layout, style, and paint phase for every section that is below the fold, so the first frame ships sooner. This shows up as a smaller Largest Contentful Paint and a smaller Total Blocking Time on long article pages.
• Cheaper re-rendering: When the user scrolls to a section the browser renders only that section. Sections that have already scrolled past keep their cached layout under content-visibility: auto, so scrolling back is close to free.
• Use the contentvisibilityautostatechange event: The element fires this event when it crosses the relevance threshold and the browser starts or stops rendering it. Hook it to lazy-mount expensive components, defer image decoding, or pause an embedded player without needing an IntersectionObserver.
• Pairs cleanly with virtual scrollers: Long lists that already use windowing libraries can drop content-visibility: auto on each row to skip layout for rows the windowing layer still keeps in the DOM, which trims the work the engine does on resize and zoom.

// Feature-detect content-visibility before relying on it
if (CSS.supports('content-visibility', 'auto')) {
  // Apply content-visibility: auto to every long article section
  document.querySelectorAll('article > section').forEach((section) => {
    section.style.contentVisibility = 'auto';
    section.style.containIntrinsicSize = 'auto 600px';
  });
  console.log('content-visibility is on; offscreen sections will skip render work.');
} else {
  console.log('content-visibility is not supported in this browser; sections render eagerly.');
}

How do you use content-visibility with contain-intrinsic-size?

contain-intrinsic-size sets a placeholder size for an element that uses content-visibility: auto while the element is off-screen and not laid out. Without it the browser treats the box as zero-height and the scrollbar, scroll-into-view, and anchor links break.

• Pair every content-visibility: auto rule with a size: Set contain-intrinsic-size on the same selector. The keyword auto in front of a length, like contain-intrinsic-size: auto 600px, tells the browser to use the placeholder size at first and remember the real rendered size after the section scrolls past.
• Pick the size from the median rendered height: Measure a few real sections in the DOM inspector and use the median value. A placeholder that is too small produces a jumpy scrollbar; a placeholder that is too large pads the page with empty space at the bottom.
• Use the auto length keyword for dynamic content: contain-intrinsic-size: auto X means the browser uses X until the section renders once, then locks the cached size for subsequent off-screen passes. This keeps the scroll position stable even when sections vary in height.
• Skip contain-intrinsic-size when the parent already sets height: If the section uses an explicit height or the parent grid template fixes the row height, the browser already knows the layout cost and the placeholder is not needed.

What are the known issues with content-visibility?

content-visibility ships in every modern engine, but the way each browser handles anchor links, find-in-page, sticky headers, and printing inside an auto section still trips up production sites.

• Anchor links break without contain-intrinsic-size: A page with content-visibility: auto on every section but no placeholder size collapses every off-screen section to zero height. Clicking an in-page anchor lands at the wrong scroll offset, since the browser only knows the real height after the section renders. Always set contain-intrinsic-size to keep anchor jumps accurate.
• Sticky positioning stops at the auto section: A position: sticky child stops sticking once any ancestor sets content-visibility: auto, because the auto rule applies layout containment and the sticky element is now positioned relative to that container. Move the sticky header above the content-visibility ancestor to keep the sticky behavior.
• Print output skips off-screen sections in older builds: Chrome 85 to 88 printed pages that used content-visibility: auto with the off-screen sections collapsed. Chrome 89 forces a full render before print so every section appears in the PDF; teams stuck on older Chromium-based clients should set content-visibility: visible inside an @media print block.
• Firefox 109 to 124 needs an opt-in flag: Even though Firefox 109 shipped the implementation, the user has to flip layout.css.content-visibility.enabled in about:config to turn it on. Pages that depend on the rendering skip should treat Firefox below 125 as unsupported and rely on the @supports gate instead.
• find-in-page works only with auto, not hidden: content-visibility: auto keeps the section reachable to Ctrl+F and to screen readers because the engine renders the section before the find result lands. content-visibility: hidden removes the section from search and from the accessibility paint, so do not use hidden on landmark text the user might search for.

In my experience, the failure that bites teams the most is the missing contain-intrinsic-size, where a page that ships content-visibility: auto without the placeholder size loads fast on the first paint but then thrashes the scrollbar, breaks deep links from search engines, and makes Cmd+F land on the wrong section. Setting contain-intrinsic-size: auto 600px on the same selector fixes the whole class of bugs in one line.

Citations

All content-visibility version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Containment Module Level 2: drafts.csswg.org/css-contain/#content-visibility
• MDN content-visibility CSS property: developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
• MDN contain-intrinsic-size CSS property: developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size
• MDN contentvisibilityautostatechange event: developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event
• web.dev, content-visibility deep dive: web.dev/articles/content-visibility
• Chrome Platform Status, content-visibility: chromestatus.com/feature/4613920211861504
• WebKit, Safari 18 features: webkit.org/blog/15865/webkit-features-in-safari-18-0
• Mozilla Firefox 125 release notes: mozilla.org/en-US/firefox/125.0/releasenotes
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support