Responsive viewport relative lengths

CSS Values and Units Module Level 3 (https://www.w3.org/TR/css3-values/#viewport-relative-lengths) ushered in viewport relative units. These are great for responsive web design, as each unit is a percentage length of the viewport:

• The vw unit, where each vw unit is 1% of the viewport width
• The vh unit, where each vh unit is 1% of the viewport height
• The vmin unit (for viewport minimum; equal to the smaller of either vw or vh)
• The vmax (viewport maximum; equal to the larger of either vw or vh)

Want a modal window that’s 90% of the browser height? This is, at least in theory, as easy as this:

.modal {
    height: 90vh;
}

Now, as useful as viewport relative units are, some browsers have had curious implementations. Safari in iOS, for example, changes the viewable screen area as you scroll from the top of a page, shrinking the address bar as you go, but crucially doesn’t make any changes...