content-visibility: The Searching & Scrolling Problem

The Magic of Skipping Work

content-visibility: auto is one of the most powerful performance properties in modern CSS. It allows the browser to skip styling and layout for elements that are off-screen. It's like virtualization built directly into the browser.

However, "skipping layout" means the browser doesn't know how tall the content is until it scrolls into view. This leads to two major UX problems: Scrollbar Dancing and Broken Anchor Links.

The Scrollbar Problem

When an element is skipped, its height is treated as 0px (unless specified). As you scroll it into view, the browser calculates its real height, causing the scrollbar thumb to jump wildly and the page length to expand dynamically.

/* ❌ Performance: Great, UX: Jumpy */
.card {
  content-visibility: auto;
}

The Fix: contain-intrinsic-size

Manual Estimation

To fix the jump, you need to tell the browser roughly how tall the element will be. This acts as a placeholder height for the skipped content.

/* ✅ Better: Placeholder height */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

Automatic Estimation (The Real Fix)

Even better, use the auto keyword with contain-intrinsic-size. This tells the browser: "Use 500px as a guess, but once you've rendered it for the first time, remember the real height and use that if it ever scrolls off-screen again."

/* 🚀 Best: Smart memory */
.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

This effectively eliminates scrollbar jumping for any content that has been visited once during the session.

What about Search (Cmd+F)?

Chrome and Edge (85+) support "find-in-page" with content-visibility: auto. The browser automatically expands the hidden content, highlights the text, and scrolls to it. However, Safari and Firefox implementation details may vary, so always test critical content visibility.