A Bashful Button Worth $8 Million

A Bashful Button Worth $8 Million

My father-in-law loves the Olive Garden. So of course that’s what we offered to bring for our first post-vaccination meal.

[…]

Nicolas Hoizey first noticed this problem on Mobile Safari back in 2015. He submitted a bug to Apple and Webkit, but was told the behavior was intentional. In December 2016, Chrome changed its behavior to be consistent with Safari:

[…]

To solve this problem, we’ll use a solution created by Louis Hoebregts that uses CSS custom properties and JavaScript to always find the correct height of the visible portion of the page. Louis wrote:

Let’s say our CSS custom variable is --vh for this example. That means we will want to apply it in our CSS like this:

OK, that sets us up. Now let’s get the inner height of the viewport in JavaScript:

We told JavaScript to grab the height of the viewport and then drilled it down into 1/100th of that total so we have a value to assign as our viewport height unit value. Then we politely asked JS to create the CSS variable (--vh) at the :root.

[…]