Viewport Unit Variants: Browser Support, dvh, svh, lvh

What are viewport unit variants?

Viewport unit variants are CSS length units defined in the CSS Values and Units Module Level 4 that size an element relative to the small, large, or dynamic viewport. The sv*, lv*, and dv* prefixes target each viewport size across the height (vh), width (vw), inline (vi), block (vb), min, and max axes.

Which browsers support viewport unit variants?

Every modern engine supports viewport unit variants on desktop and mobile, and global support sits at 94.26% based on caniuse usage data.

What are the small, large, and dynamic viewport units?

CSS Values Level 4 splits the viewport into three sizes, and each size has its own unit prefix. The small viewport assumes every collapsible browser bar is shown, the large viewport assumes every bar is hidden, and the dynamic viewport flips between the two as the bars slide.

• Small viewport (sv*): svw, svh, svi, svb, svmin, and svmax size against the smallest viewport, the one with the address bar and tab strip out. The values are stable, so an svh element never resizes mid-scroll, but the element may leave a strip of empty space when the bars retract.
• Large viewport (lv*): lvw, lvh, lvi, lvb, lvmin, and lvmax size against the largest viewport, the one with every bar hidden. lvh equals the legacy 100vh, and an lvh element fills the screen edge to edge once the user starts scrolling.
• Dynamic viewport (dv*): dvw, dvh, dvi, dvb, dvmin, and dvmax size against the live viewport and update as the toolbars expand or retract. A 100dvh element flips between the small and large heights, so it always matches the visible area, at the cost of a layout shift mid-scroll.
• Logical inline and block axes: vi maps to the inline axis and vb maps to the block axis. Under writing-mode: horizontal-tb, vi equals vw and vb equals vh. Under writing-mode: vertical-rl or vertical-lr, vi and vb swap, so a CJK or Arabic layout reads the same intent as a Latin one.

What are the use cases of viewport unit variants?

Viewport unit variants close the long-standing gap where 100vh on a phone overflowed the visible area when the address bar was shown. Production apps lean on them for hero sections, mobile chat UIs, fullscreen modals, photo viewers, and embedded video pages.

• Full-bleed hero sections: Marketing pages set min-height: 100dvh on the hero so the call-to-action stays visible whether the address bar is shown or hidden. Vercel, Linear, and Framer landing pages use the dvh fallback pattern in production.
• Mobile chat and messaging UIs: Slack, WhatsApp Web, and Signal pin the message composer to the bottom with height: 100dvh on the chat shell, so the composer never sits under the iOS Safari bottom bar when it slides in.
• Fullscreen modals and photo viewers: Image gallery libraries set the lightbox to height: 100lvh so the photo locks to the full screen and ignores the toolbar state, even if the user scrolls behind the modal.
• Embedded video and stream players: YouTube, Twitch, and Loom embeds use 100dvh on the video shell when the player goes fullscreen, so the playback area expands and contracts with the toolbar without a black gap.
• Logical-axis layouts for RTL and CJK: News sites publishing in Arabic, Hebrew, Japanese, and Chinese set inline-size: 100dvi on the article column, so the column tracks the writing direction without a writing-mode-specific override.

What are the known issues with viewport unit variants?

Viewport unit variants are well supported, so the rough edges show up in fallback strategy, layout shifts, and engine-specific quirks rather than total browser gaps.

• dvh causes layout shift on scroll: A 100dvh element resizes every time the address bar retracts or expands. Pages that wrap dvh elements in scroll-snap or sticky layouts trip over Cumulative Layout Shift in Lighthouse and lose Core Web Vitals score.
• Older browser fallback is mandatory: Chrome before 108, Firefox before 101, Safari before 15.4, and every Internet Explorer build drop a dvh declaration. Pair every dvh, svh, or lvh value with a vh fallback in a separate declaration above so the cascade picks the supported one.
• iOS Safari toolbar quirks: iOS Safari only collapses the bottom bar after the user scrolls down, so 100lvh is not actually reachable on first paint. A hero set to 100lvh shows a white strip until the first scroll gesture.
• Samsung Internet stuck on old builds: Samsung phones on Android 11 and earlier sometimes ship Samsung Internet 19 or 20, which do not parse the sv, lv, or dv prefixes. The page falls back to vh, and a 100dvh hero overflows under the navigation bar.
• Mobile keyboard does not change dvh: The on-screen keyboard on Android Chrome and iOS Safari does not move the dynamic viewport. A 100dvh chat shell sits under the keyboard unless the page also reads visualViewport.height in JavaScript.

In my experience, the trap that bites every viewport-unit migration once is the dvh layout shift on iOS Safari. A hero looks perfect on the desktop preview, then the QA team flags a 12-pixel jump when the user scrolls into the address bar. Wrap the hero with min-height: 100svh and flip to 100dvh past the fold to remove the jump.

Citations

All viewport unit variants version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - CSS length type: developer.mozilla.org/en-US/docs/Web/CSS/length
• MDN Web Docs - Viewport concepts: developer.mozilla.org/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts
• W3C CSS Values and Units Module Level 4 - Viewport-percentage Lengths: w3.org/TR/css-values-4/#viewport-relative-lengths
• WebKit blog - New WebKit features in Safari 15.4: webkit.org/blog/12445/new-webkit-features-in-safari-15-4
• Chrome for Developers - New in Chrome 108: developer.chrome.com/blog/new-in-chrome-108
• Mozilla - Firefox 101.0 release notes: mozilla.org/en-US/firefox/101.0/releasenotes
• web.dev - The large, small, and dynamic viewport units: web.dev/blog/viewport-units
• WHATWG CSS Working Group spec: drafts.csswg.org/css-values/#viewport-relative-lengths
• Wikipedia - CSS: en.wikipedia.org/wiki/CSS
• MDN Web Docs - VisualViewport API: developer.mozilla.org/en-US/docs/Web/API/VisualViewport