A Bashful Button Worth $8 Million

Written by Jason Grigsby on

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

I grabbed my iPad and passed it around to build an order. Everything went smoothly until I tried to checkout:

My wife laughs while filming me trying to tap on the checkout button. The button was off screen so I scrolled up to see it, but as soon as I picked my finger up to press the button, it snaps back off screen.

What a frustrating experience. The checkout button was below the bottom edge of the screen. I could scroll up to see the button, but when I let go, the button bounced back to its position off screen. There was no way to complete my order. I feared the worst—I might actually have to call them.

Sarah Silverman Eww GIF by HULU via GIPHY

Thankfully, I found a workaround. I tapped into the coupon code field which brought up the iPad keyboard. This allowed me to get to the checkout button. If the coupon code field wasn’t available, I wouldn’t have been able to place an order online.

Clicking in the coupon code field brings up the virtual keyboard which allowed me to scroll to the checkout button.

I’m fortunate that my job often involves testing on mobile devices. I knew that triggering virtual keyboards often shifts layouts (even if you don’t want it to). And if the coupon code field hadn’t worked, I had other devices and debuggers I could use.1

Most people don’t do this for a living. There are likely thousands of people who have been stymied by a checkout button that refuses to cooperate. So let’s take a look at why this is happening and then take a guess at how much this might cost the Olive Garden’s owners.

When is 100vh not 100% of the viewport height?

Without looking at the code, my colleague Tyler Sticka immediately identified the problem: viewport height units are tricky on touch devices because the browser chrome often changes as the user scrolls.

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:

Lengths defined in viewport units (i.e. vh) will not resize in response to the URL bar being shown or hidden. Instead, vh units will be sized to the viewport height as if the URL bar is always hidden. That is, vh units will be sized to the “largest possible viewport”. This means 100vh will be larger than the visible height when the URL bar is shown.

So let’s look at Olive Garden’s cart code to see if Tyler’s initial instinct is correct. The div containing the cart declares the height to be:

height: calc(100vh);

I don’t know why a calc() surrounds the 100vh declaration, but the results are the same. The cart drawer should take up 100% of the vertical screen real estate. Safari’s address bar and tabs are visible when I was trying to place an order, but those parts of the browser chrome aren’t included when the browser calculates 100vh. The result is a cart drawer that is too tall to fit and a checkout button off screen.

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:

.my-element {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
 height: calc(var(--vh, 1vh) * 100);
}

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

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

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.

As a result, we can now use --vh as our height value like we would any other vh unit, multiply it by 100 and we have the full height we want.

I recommend reading Louis’s full article at CSS Tricks for more detail on the problem and how this solution works. For my purposes, I was mainly interested in seeing if this solution would fix the problem with the persistently shy checkout button.

I tethered my iPad to my computer and used Safari’s Web Inspector to modify Olive Garden’s cart drawer. I changed the height to calc(var(--vh, 1vh) * 100); and then in the console, I ran:

const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

I captured a video that shows how the iPad responded when the JavaScript was executed:

Applying the VH fix causes the checkout button to pop into view.

Six seconds into the video, you’ll see the checkout button pop into view. That’s the moment the JavaScript code was executed in the console and the cart was set to 100% of the visible page height using the CSS custom property. The fix works.

How much is a checkout button worth?

A couple of years ago, I tried to calculate how much a broken autofill implementation might cost Chipotle. I find it fascinating how small changes can have a large impact when dealing with companies at the scale of Chipotle or Olive Garden. Plus, it is kind of fun to dig through earnings calls to see if there is enough information to make a guess.2

So I decided to see if I could figure out how much Olive Garden’s checkout button bug might be worth.

Turns out the Olive Garden is owned by Darden Restaurants which is a publicly traded company. Darden owns eight different restaurant brands:

According to Darden’s financials, Longhorn Steakhouse is their second largest restaurant after Olive Garden. I took a look at the Longhorn Steakhouse website and immediately noticed some similarities to Olive Garden.

The Longhorn Steakhouse home page with a headline saying "Steak as it was meant to be" The Olive Garden home page with a headline saying "The comfort you crave"
The menu and information hierarchy of Longhorn Steakhouse and Olive Garden home pages are nearly identical.

It looked like the same website with different branding. What about the checkout button? Did Longhorn Steakhouse’s checkout button have the same problem on iPads?

It does. In fact, all eight Darden brands have the same problem:

All eight Darden Restaurant websites exhibited the same checkout button bug some of the time.

Depending on the site and the page you’re on, the checkout button issue can be less prominent and easier to reset. But every Darden website has some variation of the 100vh bug affecting the checkout button.

This makes our calculations a little easier. Dardens reported $1.7 billion in sales for their third quarter 2021 which ended February 28, 2021. Of that $1.7 billion, $302 million was related to other business. That leaves $1.43 billion in sales for the restaurants.

They also reported during their Q3 earnings call that “during the quarter, nearly 19% of total sales were digital transactions.” That means ~$272M in online sales.3

Now we have to estimate the percentage of iPad users who cannot check out. This is easier said than done. StatCounter can provide us with the iOS percentage of web traffic (~14.5%) and the percentage of tablets (~4%) in the United States during the relevant time period, but it cannot tell us the percentage of iPad web traffic.

The best we can do is extrapolate from data that some kind friends were willing to share:

We have reports from both sides of the Atlantic and the numbers are quite close. We could go with the lesser of the two, 1.7%, but let’s be more conservative and say that iPads represent 1% of Dardens web traffic.4

Finally, let’s assume that a quarter of the iPad users who encounter the disappearing checkout button are made of sterner stuff than I am and placed an order over the phone. With those rough guesses in hand, the math looks like this:

  $1,430,000,000  Sales in Q3 financial quarter
*            .19  Percent of sales online
=   $271,700,000  Online sales in Q3
*          .0075  Est. percent of iPad users lost
=     $2,032,500  Est. amount of sales lost per quarter
*              4  Number of quarters in a year
=     $8,120,000  in potential sales lost due to 100vh bug

If fixing the introverted checkout button caused a three-quarters of a percentage point increase in online orders, it would increase Darden’s revenue by $8.1 million annually.

All of these numbers are guesses. They’re probably wrong. But even if they were a tenth of what I estimated, it would still be $812k. See what I mean about small changes making a big difference at this scale?

Takeaways for your website

That’s enough fun with financial statements for now. Let’s focus on what we can learn from these sites:

  • 100vh does not necessarily work as you expect it in every context
  • There is no substitute for testing on real devices

The good news is that we have a known workaround and because Darden’s websites share code, they can probably update it in one place and fix them all at the same time.


P.S. My father-in-law was thrilled with his meal, and we were happy to be sharing it with him. Thank you to local health authorities and vaccine providers for making it possible. And thanks to Olive Garden Lake Oswego for the delicious food.

It has been a long pandemic, and it isn’t over yet. If you have the resources to do so, please consider donating to GiveIndia’s COVID-19 relief funds, the COVID-19 Solidarity Response Fund, and other organizations fighting this pandemic. We all need to look out for each other.

And when you can do so safely, hug the ones you love.


  1. It may seem extreme, but I’d be tempted to tether my iPad and open a debugger before making a voice call. 
  2. And to be clear, these are nothing more than guesses. Only a well-constructed A/B test would let us know the impact for certain. 
  3. Dardens refers to digital both in terms of online transactions and people who pay using tabletop devices. Given the context in the call, I believe the 19% is online transactions only. 
  4. If you want another reason why 1% seems conservative, it seems likely that the iPad isn’t the only device impacted by the 100vh bug. 
Jason Grigsby

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Never miss an article!

Get Weekly Digests


Comments

Add a comment

This is interesting, but users tend to keep preferences, so numbers will stick only if they don’t change the device. And there’s another detail – using iPad to buy your food doesn’t have the same weight as gov.uk.

Replies

This is interesting, but users tend to keep preferences, so numbers will stick only if they don’t change the device.

I’m not sure I understand what you mean here. Are you saying that the cart will persist across devices so there may be some people who switch to another device to complete checkout?

If so, that only works if the user has an existing account. I’ve bought a few meals now from Olive Garden and never logged in.

And in general for e-commerce, you want to reduce as many barriers as possible to completing transactions. Expecting people to switch devices is likely expecting too much given industry cart abandonment numbers.

And there’s another detail – using iPad to buy your food doesn’t have the same weight as gov.uk.

Maybe. To my ears, this sounds a lot like the old mobile context debates where people made many assumptions about what people would, or more commonly wouldn’t, do on a mobile device.

My experience is that it is difficult to assume what users will want to do on any type of device and the best bet is to meet them wherever they are on whatever device they choose.

That said, both of these could be good reasons why the .75% estimate is high. It is just an estimate. It could be wrong the other way as well. On Twitter, Cory Birdsong pointed out:

FWIW, it’s possible these iPad numbers are extremely low. In 2019, iPad Safari started using an identical user agent to Mac Safari as part of an effort marketed as “Desktop-class browsing to avoid phone-optimized layouts being served to iPads.

In truth, it doesn’t matter that much if the numbers are right. That was just for fun and as the article says, if the math was 10% of the estimate, it is still a lot of potential revenue. The bug clearly affects users trying to give these companies their business. That’s good enough reason to fix it.

Yeah, what I’m saying is that if someone is determined to buy, will eventually buy from the same place. “Preference” is the reason why user ia there in the first place.
My two points are not meant to undermine the loat, which is obviously there and can EASILY get fixed, but the numbers are far from real. Too bad that are no studies on product abandonment on all devices. I tend to use desktop when mobile has issues. But I also tend to buy my pizza from the same place for example and I don’t like experiments when it comes to food.
Most important aspect I’d say is related to the device. I don’t think 1.86% from buyers use a tablet. That’s beyond interesting! For example this number may be bigger on Amazon because Amazon sells tablets and their system make the transanctions easy. It shouldn’t apply to Uber Eats on the other hand, but the comparison is the closest to the truth.

Thanks for taking the time to answer. Most blogs today don’t really work as blogs anymore.

And your topic is a pretty good find!

Thankfully this annoying “feature” will be a thing of the past when the new unit types come in to play (e.g. dvh)

Hi Jason, it’s really interesting all the analysis you made and how you make an effort to solve a really annoying situation (that’s a big mistake from the UX/UI department). But one thing comes to my mind, does this problem persist in portrait mode also?

Hope you have a great weekend.

Greetings from the south cone

In actuality, this is a bug with Safari on iPad devices that they call a “feature”. Safari is the IE of the modern web world, while IE (Edge based on Chromium) is actually decent.

Safari needs to catch up with modern web standards.

Replies

I share some frustration with Safari’s speed of innovation, but this isn’t Safari specific. As I noted above, Chrome followed Safari’s lead on how to handle vh units. So even if this bug doesn’t show up on an Android tablet—I haven’t tested it to know for certain—the Chrome team has explicitly said their implementation should work the same as Safari’s.

In fact, the problem with vh units has spurred a large, multiple month discussion and the addition of new CSS units into the spec.

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us