我的岳父很喜欢 Olive Garden 这家店，疫情过后这家店也成了点外卖的首选。拿起 iPad ，挑选，加入购物车，下单....一切都很顺利，直到我开始结帐：
点不到啊！
太恶心了！结帐按钮位于屏幕底部边缘下方，向上滚动可以看到。但是当我放手时，按钮弹回到屏幕外的位置，我根本没法下单。实在不行的话，我只能给他们打电话了......
机智的我还是找到了解决方法！我点击了弹出 iPad 键盘的优惠券代码字段，这样可以点击结帐按钮。
我很庆幸我的工作经常涉及移动设备的测试，所以我知道触发虚拟键盘经常会改变布局（即使你不需要）。
大多数人可能只是做个网页应付差事，但是这可能导致成千上万的人因为“娇羞”的结帐按钮而下无法支付。让我们来看看为什么会发生这种情况，然后猜测一下这可能会让 Olive Garden 付出多少代价。
什么时候 100vh 不是视窗高度的 100%？
在不看代码的情况下，我的同事 Tyler Sticka 立即发现这个问题：视口高度单位在触摸设备上很棘手，因为浏览器 chrome 经常随着用户滚动而变化。
Nicolas Hoizey 早在 2015 年就在 Mobile Safari 上首次注意到这个问题。他向 Apple 和 Webkit 提交了一个错误，但却被告知该行为是故意的！ 2016 年 12 月，Chrome 更改了其行为以与 Safari 保持一致：
那么，让我们看看 Olive Garden 的代码，看看 Tyler 最初的直觉是否正确。包含购物车的 div 声明高度为：
height: calc(100vh);我不懂为什么 calc() 要嵌套 100vh，尽管结果是一样的。购物车抽屉应占垂直屏幕空间的 100%。当我尝试下订单时，Safari 的地址栏和选项卡是可见的，但是当浏览器计算 100vh 时，浏览器 chrome 的这些部分不包括在内。结果是购物车抽屉太高而无法容纳，并且结帐按钮不在屏幕上。
为了解决这个问题，我们将使用 Louis Hoebregts 创建的 解决方案，它使用 CSS 自定义属性和 JavaScript 来始终找到页面可见部分的正确高度。Louis 写道：
我比较建议大家阅读 Louis 在 CSS Tricks 上的 完整文章，里面包括了有关该问题的描述以及解决方案。
我将 iPad 连接到电脑上，并使用 Safari 的 Web Inspector 来修改 Olive Garden 的购物车抽屉。我将高度更改为 calc(var(--vh, 1vh) * 100); 然后在控制台中运行：
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);效果如下：
一个结账的按钮值多少钱？
试着算一下 Olive Garden 的结账按钮 bug 可能值多少钱。
Olive Garden 归 Darden 餐厅所有，这是一家上市公司。Darden 旗下有八个餐厅品牌：Olive Garden，Longhorn Steakhouse，Cheddar’s Scratch Kitchen，Yard House，The Capital Grille，Seasons 52，Bahama Breeze，Eddie V’s。我发现了八家餐厅在 iPad 上都有类似的问题：
Dardens 报告称，截至 2021 年 2 月 28 日的 2021 年第三季度销售额为 17 亿美元。在这 17 亿美元中，3.02 亿美元与其他业务有关。这为餐厅留下了 14.3 亿美元的销售额。
他们还在第三季度财报电话会议上报告称，“在本季度，近 19% 的总销售额是数字交易。”这意味着在线销售额约为 2.72 亿美元。
在他们的twitter上找到了一些信息：
假设遇到结帐按钮消失的 iPad 用户中有四分之一的人用电话下单，现在我们来推断一下：
默认 第三季度财务季度销售额: 1,430,000,000 美元
乘以 0.19: 在线销售额
等于 第三季度在线销售额: 271,700,000 美元
乘以 .0075: 估算流失的 iPad 用户百分比
等于 约2,032,500 美元: 每季度损失的销售额
乘以 四个季度: 一年有4个季度
等于 8,120,000 美元: 因为 100vh 导致的潜在损失额如果修复该结账按钮，那么 Darden 的年收入可能将增加 810 万美元！