Hacking 100vh On Mobile

The problem

100vh breaks on mobile.

99% it’s 100%

One workaround is to set the height of the HTML and body to height: 100%:

html,
body {
	height: 100%;
}

The problem with this is it doesn’t work for external SVG’s; they don’t respect % units 😓. The result: 99% of the time this does the trick.

PostCSS 100vh

A friendly PostCSS plugin fixes this on iOS. The downside is it doesn’t fix a bug in Chrome for Android.

You may need postcss-viewport-height-correction for a more robust 100vh fix but relying on JS for this isn’t enticing.

Native CSS solution

The CSS spec offers a solution to this with new large, small, and dynamic viewport units (obligatory CSS-Tricks post). Chrome still has these behind a flag so you can’t depend on it until we see the ✅

Syntax suggests using 100vh ass a fallback for the new units:

html,
body {
	/* fallback to 100vh if dvh isn't supported */
	height: 100vh;
	/* use dynamic viewport height if available */
	height: 100dvh;
}