Avoid 100vh On Mobile Web | chanind.github.io

Viewport units in CSS sound great. If you want to style an element to take up the full screen height, you can just set height: 100vh and voila - you have a perfect fullscreen element, which resizes as the viewport changes! Sadly, this is not the case. 100vh is broken in a subtle but fundamental way on mobile browsers that makes it nearly useless. It’s best to avoid 100vh and instead rely on javascript to set heights for a full viewport experience.

Viewport units in CSS sound great. If you want to style an element to take up the full screen height, you can just set height: 100vh and voila - you have a perfect fullscreen element, which resizes as the viewport changes! Sadly, this is not the case. 100vh is broken in a subtle but fundamental way on mobile browsers that makes it nearly useless. It’s best to avoid 100vh and instead rely on javascript to set heights for a full viewport experience. The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible a

related reading

• <meta name="viewport"> HTML attribute value - HTML | MDNdeveloper.mozilla.org
• Web Interface Guidelinesvercel.com
• 50 ways to vertically center content on a webpage, mostly wrongquaxio.com
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• Animating height: auto — nemzes.netnemzes.net
• Transitions.dev — Essential transitions for web appstransitions.dev
• WebGL Resizing the Canvas.webglfundamentals.org
• Content Firstadactio.com
• The Best Way to Implement a "Wrapper" in CSS | CSS-Trickscss-tricks.com
• will-change in CSSjakub.kr
• Getting sticky with it — Troubleshooting CSS sticky positioning - DEV Communitydev.to