Use CSS containment to limit repaint scope
Apply the contain property to components to tell the browser they are independent from the rest of the page, enabling rendering optimizations that reduce repaint and reflow scope.
- contain: layout style paint tells the browser a component is visually self-contained
- content-visibility: auto skips rendering off-screen content entirely
- Containment limits how far layout recalculations need to propagate
- Use contain: strict for widgets with no overflow that shouldn't affect the page
Rule Details
CSS containment is a performance optimization hint — you tell the browser "this element is isolated," and the browser can skip rendering work for the rest of the page when something inside it changes.
Code Example
contain: none; /* Default — no containment */
contain: layout; /* Internal layout doesn't affect external */
contain: style; /* CSS counters don't escape this element */
contain: paint; /* Content clipped to border box, creates stacking context */
contain: size; /* Element size is independent of children */
contain: inline-size; /* Inline size is independent (for container queries) */
/* Shorthand combinations */
contain: layout paint;
contain: content; /* layout + paint + style */
contain: strict; /* layout + paint + style + size */Why It Matters
By default, a CSS change anywhere on the page can potentially affect any other element's layout. CSS containment declares that certain elements are isolated — changes inside them don't affect the outside world. This lets browsers skip large portions of the rendering pipeline for unchanged content, which is especially valuable for pages with many independent components.
Practical Use Cases
Independent Widgets
/* A widget that doesn't overflow and doesn't interact with page layout */
.chat-widget {
contain: layout paint;
/* Changes inside .chat-widget only repaint within its bounds */
}
/* A fixed-size advertisement */
.ad-unit {
contain: strict;
width: 300px;
height: 250px;
}Repeated List Items
/* Each item in a long list is independent */
.feed-item {
contain: content; /* layout + paint + style */
}
/* Rerendering one feed item doesn't affect others */content-visibility for Off-Screen Content
/* Skip rendering content that's not visible */
.article-section {
content-visibility: auto;
/* Browser skips layout, paint, and compositing for off-screen sections */
/* Automatically re-renders when it enters the viewport */
}This is especially impactful for long pages — the browser only renders what's near the viewport.
/* Provide a contain-intrinsic-size hint to prevent scroll jumps */
.article-section {
content-visibility: auto;
contain-intrinsic-size: auto 800px; /* Estimated height */
}Container Queries with Containment
/* Container queries require containment on the parent */
.card-container {
container-type: inline-size; /* Implicitly sets inline-size containment */
container-name: card;
}
@container card (min-width: 400px) {
.card__content {
display: flex;
}
}Measuring Impact
Use Chrome DevTools' Performance panel to measure:
- Open DevTools → Performance
- Record a scroll or interaction
- Look for "Layout" entries — their scope shows how containment helped
Support Notes
- Containment can change layout, sizing, or paint behavior differently across engines, so verify both performance gains and layout correctness in target browsers.
- Use a fallback note when a containment mode is unsupported or changes intrinsic sizing in ways your layout cannot tolerate.
Verification
- Inspect the rendered UI at the breakpoints and interaction states affected by the rule.
- Confirm the computed styles match the intended fix in DevTools.
- Test at least one mobile and one desktop viewport before shipping.
- If the rule affects motion, contrast, or layout stability, verify those user-facing outcomes directly.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Identify components in this CSS that are visually self-contained (no overflow, no interaction with elements outside) and could benefit from CSS containment.
Fix
Auto-fix issues
Add appropriate contain values to self-contained components. Add content-visibility: auto to repeated off-screen list items.
Explain
Learn more
Explain CSS containment values, how they limit rendering scope, and when content-visibility: auto provides the biggest benefit.
Review
Code review
Review stylesheets, component styles, and responsive states related to Use CSS containment to limit repaint scope. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.