Jason Grigsby

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! ↩︎

• Older: Add punctuation to your alt text
• Newer: How to compare images fairly

Related contents with similar topics

1. 

   Zach Leatherman

   Educational Sensational Inspirational Foundational

   • Nicolas Hoizey
   • 30 August 2023
   • Web, CSS, HTML, JavaScript, responsive
   • 1 reaction

   A historical record of foundational web development blog posts. I've already read most of these great articles, and will of course read the few missing.…

2. 

   Andy Bell , Leanne Renard and Liridon Hasani

   The ideal viewport doesn’t exist

   • Nicolas Hoizey
   • 25 August 2023
   • responsive, viewport
   • 20 reactions

   you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep…

3. Note from 24 May 2023

   • Nicolas Hoizey
   • 24 May 2023
   • CSS, image, responsive, WebPerf
   • 2 reactions

   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>?

4. Note from 2 November 2022

   • Nicolas Hoizey
   • 2 November 2022
   • CSS, responsive
   • 6 reactions

   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) { … }

5. Note from 19 July 2022

   • Nicolas Hoizey
   • 19 July 2022
   • 100vh, CSS, viewport
   • 6 reactions

   💡 CSS idea of the day:

   :root {
     --full-height: 100vh;
   }
   @​supports(height: 100dvh) {
   
   :root {
   
   --full-height: 100dvh;
   
   }
   
   }

   Clever? Stupid? Old?