Improving height behavior: 100VH on mobile

Improving height behavior: 100VH on mobile

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.

JavaScript:

[code https://github.com/dumkaio/blog/blob/master/improving_height_behavior_100vh_on_mobile/01_code.js]

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:

[code https://github.com/dumkaio/blog/blob/master/improving_height_behavior_100vh_on_mobile/02_code.js]

CSS:

[code https://github.com/dumkaio/blog/blob/master/improving_height_behavior_100vh_on_mobile/style.css]

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.

It might be interesting for you

Let’s create together

Start a project

Let’s create together

What are your interested in?

Budget

Timeframe

Personal details

Thank you for getting in touch!
We appreciate you contacting us.
We will get back to you shortly.
Dumka
Oops! Something went wrong while submitting the form.
Close