flâneur

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

chanind.github.io · 458 words · saved by 1 readers

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