Another pretty known issue is an ugly jumpy effect when you use 100VH points on mobile devices. As mobile browsers have a top address bar as a part of the UI, some space of your section will be cut or layout will be re-rendered and re-adjust since the dimensions have changed. Which is bad for user experience.
This issue was mentioned so many times in different articles and forums, but I would like to mention one where I take the solution from. Here’s the magic you’ll create:
As you can see, social icons get cropped at the bottom, but we want to see them without scrolling. Check out how it looks on mobile.
Just use a small chunk of JS and CSS to fix this—put the code into the heading of a page using Script and Style tags respectively.
When you scroll down, the address bar is collapsing which updates the value of --vh and repaints the page so the user may experience a jump effect.
In case of fixed height for the mobile landscape breakpoint, we don’t need the event listener as you can find in the original example:
On a side note, updating the value of --vh will trigger a repaint of the page, and the user may experience a jump as a result. Because of this, I’m not advising you to use this trick for every projector to replace all usage of the vh unit, but only when you need your users to have an exact viewport unit value.