A Bashful Button Worth $8 Million

peekaboo-r5-800.jpg
A Bashful Button Worth $8 Million 3

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.

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.

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.

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.

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.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
My petite-vue review

Road testing petite-vue with a simple category filter July 21, 2021 petite-vue is a new cut of the Vue project specifically built with progressive enhancement

Read More »