Understanding the different CSS viewport units (dvh, svh, lvh)

Background

While working on my current project, I received a request from the client mentioning the masthead is too tall which ended up covering the content when user is viewing the pages on shorter screens.
This is an important concern as it affects accessibility for all users so we got to work on it immediately (by that I meant adding the ticket to the next sprint)!

So I changed the height of the masthead component from the original implementation of 2/3 of viewport's height to 50% of viewport's height:

// Old implementation
height: 66.7%;
// New implementation
height: 50vh;

However, when I did this change and checked it on my localhost on
both desktop and mobile view, it did not resemble 50% of the screen height. Instead, it seemed closer to 60% of viewport's height. So I decided to investigate more into this issue, and alas, I came across an article about dynamic viewport height.
After reading the article, I had a much better understanding on why the masthead was not appearing as I had thought it should.

Solution 1

For regular viewport height, 100vh would meant from the bottom of the top toolbar to the bottom of the screen while a dynamic viewport height at 100dvh would mean the height of the content viewable not being blocked by the top and bottom toolbars as depicted in this referenced image below.

So I immediately went to test it out and indeed, the masthead image now appeared smaller than when i used 50vh. However, to my horror, as I scrolled down the page, the masthead jumped. I found that this is due to the toolbar minimizing as the user scrolls down on the browser and since I'm using dynamic viewport height units, the viewable content height changes as the user scrolls. Hence, causing this unusual effect. So, I decided to explore the other viewport units.

On Safari browser, the image jumps to it's new height after scrolling as the bottom toolbar hides:

Link to image

On Chrome browser, the image stretches to it's new height when scrolled as the bottom toolbar hides:

Link to image

Solution 2

There are several viewport height units available to use:

• dvh: Dynamic Viewport Height
• svh: Small Viewport Heigh
• lvh: Large Viewport Height
• vh: Viewport Height

These are also true for viewport width!
With svh, it refers to the bottom of top toolbar to the top of the bottom toolbar while lvh refers to the top of the top toolbar to the bottom of the bottom toolbar.

With this newfound understanding, I decided to go with svh and indeed, the jumping bug no longer exists since svh remains consistent and the client is also satisfied with this height improvement!

Conclusion

In the end, deciding which viewport units to use ultimately depends on your requirements but do be careful when using dvh if you have any height dependent elements on your page.

This purpose of this post is to document my thought process while resolving a bug and also the research put into it. Since this is also my first post, I would love to know any feedback and points that I can improve on, thank you!

Comments

[Norberth]

Thank you for the great article, am currently struggling with a similar thing. My problem is I don't know what is the default unit for different browsers, or does it depend on the device am using🤷. P.S. It would have been nice if you had included links to the articles which helped during your research so we can pass through them too for more clarification