Jason Grigsby avatar Jason Grigsby

A Bashful Button Worth 8 Million Dollars

Screenshot of “A Bashful Button Worth 8 Million Dollars”

https://cloudfour.com/thinks/a-bashful-button-worth-8-million/

6 years ago I reported a bug about 100vh being larger than the viewport height in Safari. It was "intentional" according to webkit/Safari team, and other browsers followed… 🤦‍♂️

Now Jason shows here how this "tiny little annoyance"[1] may have cost $8.1 million a year to one single brand.

Imagine the total for all sites of other brands… 💸💸💸

As Jason says:

There is no substitute for testing on real devices

And he knows this more than anyone else.

  1. I still get at least 1000 visits a month on this article! ↩︎

  1. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  2. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }