Modern Viewport Units

Introduction

Modern viewport units — svh, lvh, dvh (small/large/dynamic viewport height), svw, lvw, dvh, and vi/vb (inline/block) — solve mobile browser URL bar show/hide jank that broke classic 100vh full-screen heroes. Staff engineers use dvh for fluid full-height sections with svh fallback and 100vh as legacy floor.

The 100vh mobile bug was a top responsive pain point until dynamic viewport units shipped (2022–2023).

Business problem

Business pressure: Full-screen mobile landing uses 100vh — bottom CTA hidden behind browser chrome or jumps when URL bar collapses — measurable conversion loss. Modern units map to visible viewport dynamically.

• UX: Hero and modal height feel native on mobile.
• CLS: dvh reduces jump when toolbar animates.
• Design: True full-bleed mobile sections without JS resize hacks.

Why this feature exists

Platform history: Mobile Safari and Chrome changed viewport behavior; classic vh measured layout viewport including hidden UI. CSS Values 4 viewport units address large/small/dynamic segments.

• Problem solved: 100vh overflow and jump on mobile.
• Units: svh smallest, lvh largest, dvh tracks dynamic toolbar.

Browser rendering perspective

Rendering impact: dvh changes trigger layout when URL bar animates — prefer min-height dvh on hero, not animate height every frame. svh stable for min-height floor.

Internal browser workflow

Progressive stack:

.hero {
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  min-height: 100dvh;
}
.modal-sheet {
  max-height: 90dvh;
  overflow: auto;
}

Feature deep dive

Unit meanings: svh — smallest visible (toolbar shown). lvh — largest (toolbar hidden). dvh — current dynamic. Use dvh for min-height heroes; svh for stable min; lvh rare for max effects.

• vi/vb: logical viewport inline/block — RTL and vertical writing modes.

Syntax

@supports: @supports (height: 100dvh) { min-height: 100dvh; }

Examples

Bottom sheet max height:

.sheet {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-height: 85dvh;
  border-radius: 1rem 1rem 0 0;
}

Real-world use

Tailwind v3.4+ dvh utilities. Major marketing sites adopted dvh heroes 2023+. Modal and drawer components in DS use dvh max-height.

Real production example

Pattern: Hero min-height dvh stack; test iOS Safari + Chrome Android on real devices.

Enterprise use case

Enterprise: Mobile app webviews may not support dvh — test embedded WebView versions.

Accessibility considerations

A11y: Full dvh modal must scroll internal content — max-height + overflow auto.

Performance considerations

Performance: Avoid transition on dvh height — layout every frame during toolbar animation.

SEO considerations

SEO: Hidden CTA below fold hurts mobile conversion signals indirectly.

Scalability considerations

Scale: Token --viewport-min-height: 100dvh in DS.

Common production issues

Failures: dvh in old WebView — fallback vh only. position fixed + 100dvh double-count safe area.

Debugging guide

Debug: Real device scroll — watch hero height vs toolbar. Emulation imperfect for dvh.

Best practices

• Fallback chain vh → svh → dvh.
• dvh for min-height heroes and modal max-height.
• Test iOS Safari real device.

Anti-patterns

• JavaScript --vh hack when dvh supported.
• height: 100dvh on body with overflow content.

Trade-offs

• dvh: dynamic accurate; layout shift on toolbar.
• svh: stable; may leave gap when toolbar hides.

Architecture review questions

• Hero uses dvh stack?
• WebView minimum versions for dvh?

Interview questions

Hands-on exercise

Exercise: Full-height hero with dvh; test on iOS device scroll.

Staff engineer notes

• Remove JS --vh custom properties when dvh baseline supported in your analytics browser share.

Common pitfalls

• safe-area-inset-bottom ignored on fixed footers with dvh.

Try it yourself

Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.

Summary

Modern viewport units (svh, lvh, dvh) provide accurate full-height layouts on mobile browsers with dynamic toolbars — replacing 100vh hacks and JS workarounds.

Key takeaways

• svh/lvh/dvh fix mobile 100vh bugs.
• Fallback chain for older browsers.