Hidden, scroll, auto in CSS - Performance & Optimization

Performance: Hidden, scroll, auto

MEDIUM IMPACT

These CSS overflow properties affect how content overflow is handled, impacting layout stability and rendering performance.

Handling overflow content in a container

CSS

div {
  overflow: scroll;
  height: 200px;
}

Using overflow: scroll always shows scrollbars, preventing layout shifts caused by scrollbar appearance changes.

📈 Performance Gainavoids layout shifts, reduces reflows related to scrollbar toggling

Handling overflow content in a container

CSS

div {
  overflow: auto;
  height: 200px;
}

Using overflow: auto can cause layout shifts when scrollbars appear or disappear dynamically, leading to CLS issues.

📉 Performance Costtriggers layout recalculation and repaint when scrollbar toggles

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
overflow: auto	Minimal DOM changes	Reflow triggered when scrollbar appears/disappears	Medium paint cost due to scrollbar rendering	[!] OK
overflow: scroll	Minimal DOM changes	Single reflow on initial layout	Consistent paint cost, no layout shifts	[OK] Good
overflow: hidden	Minimal DOM changes	No reflows from scrollbar changes	Lower paint cost by clipping overflow	[OK] Good
overflow: visible	Minimal DOM changes	No scrollbar reflows but possible layout shifts	Higher paint cost due to overflow content	[X] Bad

Rendering Pipeline

Overflow properties affect the Layout and Paint stages by controlling how content outside container bounds is handled and whether scrollbars are rendered.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout

Core Web Vital Affected

CLS

These CSS overflow properties affect how content overflow is handled, impacting layout stability and rendering performance.

Optimization Tips

1Use overflow: scroll to avoid layout shifts caused by scrollbar toggling.

2Use overflow: hidden to clip content and reduce paint cost.

3Avoid overflow: auto if dynamic scrollbar appearance causes layout instability.

Performance Quiz - 3 Questions

Which overflow property setting helps prevent layout shifts caused by scrollbar appearance?

A overflow: visible

B overflow: auto

C overflow: scroll

D overflow: hidden

DevTools: Performance

How to check: Record a performance profile while interacting with the container that has overflow styles. Look for layout and paint events triggered when scrollbars appear or content changes.

What to look for: Look for layout recalculations and paint events that coincide with scrollbar toggling or content overflow changes indicating performance impact.