🥳 welcome interested partners, do something meaningful together!

I launched a weekly translation project at github.com and fedarling.github. IO

Currently, there is still a lack of like-minded partners, which is purely personal interest. Of course, it will also help to improve English and front-end skills. Requirements: English should not be too bad, proficient in using Github, persistent, modest, and responsible for what they do.

If you want to participate, you can either click here to view it or send an issue message to the warehouse. My blog also has specific personal contact information: daodaolee.cn

My father-in-law loves the Olive Garden, which has become a go-to place for takeout since the pandemic. Pick up iPad, select, add to cart, order…. Everything was going well until I started checking out:

I can’t!

That’s disgusting! The checkout button is located just below the bottom edge of the screen and can be seen by scrolling up. But when I let go, the button bounced back to its off-screen location and I couldn’t place an order at all. If really not, I can only call them……

Quick-witted, I found a solution! I clicked the coupon code field that popped up on the iPad keyboard so I could click the checkout button.

I’m fortunate that my job often involves testing on mobile devices, so I know that triggering a virtual keyboard often changes the layout (even if you don’t need one). Most people might just do a web errand, but this could leave thousands of people unable to pay because of the “cosy” checkout button. Let’s take a look at why this is happening, and then make a guess at how much it might cost Olive Garden.

What time100vhNot 100% window height?

Without looking at the code, my colleague Tyler Sticka immediately noticed that viewport height units are tricky on touch devices because the browser Chrome often changes as the user scrolls.

Nicolas Hoizey first noticed this problem in Mobile Safari back in 2015. He submitted an error to Apple and Webkit, but was told it was intentional! In December 2016, Chrome changed its behavior to be in line with Safari:

Values defined in the viewport unit (vH) are not resized to show or hide the URL bar. Instead, the VH unit will be adjusted to viewport height, as the URL bar is always hidden. That is, the VH unit will be adjusted to the “maximum possible window”. This means that 100vh will be greater than the height visible when displaying the URL bar.

So, let’s take a look at Olive Garden’s code to see if Tyler’s initial instincts were correct. The div containing the shopping cart declares the height to be:

height: calc(100vh);
Copy the code

I don’t understand why calc() is nested 100vh, although the result is the same. The shopping cart drawer should occupy 100% of the vertical screen space. Safari’s address bar and tabs were visible when I tried to place an order, but those parts of the browser chrome were not included when the browser calculated 100vh. The result is that the shopping cart drawer is too high to fit, and the checkout button is not on the screen.

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

Assuming our CSS custom variable is –vh in this example, we can use it like this:

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

Now let’s get the internal height of the viewport in JavaScript:

// First, we get the viewport height and multiply it by1%To obtain the value of vh units let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the document root.documentElement.style.setProperty('--vh', `${vh}px`);
Copy the code

We tell JavaScript to grab the height of the window, and then pull it down to 1/100 of the total, so we have a value for our window height unit value. We then ask JS to create the CSS variable (–vh) in :root.

As a result, we can now use –vh as our height value just like any other VH unit, multiply it by 100, and we get the full height we want.

I would recommend reading Louis’ full CSS Tricks article, which includes a description of the problem and a solution. I connected my iPad to my computer and used Safari’s Web Inspector to modify Olive Garden’s shopping cart drawer. I’ll change the height to calc(var(–vh, 1vh) * 100); Then run it in the console:

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

The effect is as follows:

How much does a checkout button cost?

Try to figure out how much the Olive Garden checkout button bug might be worth.

Olive Garden is owned by Darden Restaurants, which is a publicly traded company. Darden has eight restaurant brands: Olive Garden, Longhorn Steakhouse, Cheddar’s Scratch Kitchen, Yard House, The Capital Grille, Seasons 52, Bahama Breeze, Eddie V ‘s. I found eight restaurants with similar problems on the iPad:

Dardens reported sales of $1.7 billion for the third quarter of 2021 ended February 28, 2021. Of the $1.7 billion, $302 million is related to other businesses. That left restaurants with $1.43 billion in sales.

They also reported on their Q3 earnings call that “during the quarter, nearly 19% of total sales were digital transactions.” That translates to about $272 million in online sales.

Found some information on their Twitter feed:

On our CMS, iPad adoption looks to be around 1.7% in 2021. It involves 659 sites that average 3.5 million to 4 million page views per month.

About 1.86 percent of our monthly users use ipads.

Assuming that a quarter of iPad users who see the checkout button disappear place orders over the phone, now let’s extrapolate:

Default Q3 financial quarterly Sales: $1,430,000,000 multiplied by 0.19: Online sales equals Q3 online sales: $271,700,000 multiplied by.0075: Estimated percentage of lost iPad users equals approximately $2,032,500: lost sales per quarter times four quarters: four quarters in a year equals $8,120,000: potential loss due to 100vhCopy the code

If the checkout button is fixed, Darden’s annual revenue could increase by $8.1 million!

The relevant data

A Bashful Button Worth $8 Million

Translation plan