共计 2614 个字符，预计需要花费 7 分钟才能阅读完成。
🥳 欢送有趣味的小伙伴，一起做点有意义的事！
我发动了一个 周刊翻译打算，仓库地址，拜访地址
当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github 纯熟应用、有恒心、虚心、对本人做的事负责。
想参加的小伙伴，能够 wx 私信，也能够给仓库发 issue 留言，我博客也有具体的集体联系方式：daodaolee.cn
我的岳父很喜爱 Olive Garden 这家店，疫情过后这家店也成了点外卖的首选。拿起 iPad，筛选，退出购物车，下单 …. 所有都很顺利，直到我开始结帐：
点不到啊！
太恶心了！结帐按钮位于屏幕底部边缘下方，向上滚动能够看到。然而当我撒手时，按钮弹回到屏幕外的地位，我基本没法下单。切实不行的话，我只能给他们打电话了 ……
机智的我还是找到了解决办法！我点击了弹出 iPad 键盘的优惠券代码字段，这样能够点击结帐按钮。
我很庆幸我的工作常常波及挪动设施的测试，所以我晓得触发虚构键盘常常会扭转布局（即便你不须要）。
大多数人可能只是做个网页应酬差事，然而这可能导致成千上万的人因为“娇羞”的结帐按钮而下无奈领取。让咱们来看看为什么会产生这种状况，而后猜想一下这可能会让 Olive Garden 付出多少代价。
什么时候 100vh 不是视窗高度的 100%？
在不看代码的状况下，我的共事 Tyler Sticka 立刻发现这个问题：视口高度单位在触摸设施上很辣手，因为浏览器 chrome 常常随着用户滚动而变动。
Nicolas Hoizey 早在 2015 年就在 Mobile Safari 上首次留神到这个问题。他向 Apple 和 Webkit 提交了一个谬误，但却被告知该行为是成心的！2016 年 12 月，Chrome 更改了其行为以与 Safari 保持一致：
在视窗单位（即 vh）中定义的值不会因为 URL 栏的显示或暗藏而调整大小。相同，vh 单位将被调整为视口高度，就比方 URL 栏总是暗藏的。也就是说，vh 单位将被调整为“最大可能的视窗”。这意味着 100vh 将大于显示 URL 栏时的可见高度。
那么，让咱们看看 Olive Garden 的代码，看看 Tyler 最后的直觉是否正确。蕴含购物车的 div 申明高度为：
height: calc(100vh);我不懂为什么 calc() 要嵌套 100vh，只管后果是一样的。购物车抽屉应占垂直屏幕空间的 100%。当我尝试下订单时，Safari 的地址栏和选项卡是可见的，然而当浏览器计算 100vh 时，浏览器 chrome 的这些局部不包含在内。后果是购物车抽屉太高而无奈包容，并且结帐按钮不在屏幕上。
为了解决这个问题，咱们将应用 Louis Hoebregts 创立的 解决方案，它应用 CSS 自定义属性和 JavaScript 来始终找到页面可见局部的正确高度。Louis 写道：
假如咱们的 CSS 自定义变量在这个例子中是
--vh，那咱们能够这样应用：.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); }当初让咱们在 JavaScript 中获取视口的外部高度：
// 首先，咱们失去视口高度，而后将其乘以 1% 以取得 vh 单位的值 let vh = window.innerHeight * 0.01; // 而后咱们将 --vh 自定义属性中的值设置为文档的根目录 document.documentElement.style.setProperty('--vh', `${vh}px`);咱们通知了 JavaScript 要抓取视窗的高度，而后将其向下取到总数的 1/100，这样咱们就有了一个值作为咱们的视窗高度单位值。而后咱们要求 JS 在 :root 中创立 CSS 变量 (
--vh)。后果，咱们当初能够像应用任何其余 vh 单位一样应用
--vh作为咱们的高度值，将它乘以 100，咱们就失去了咱们想要的残缺高度。
我比拟倡议大家浏览 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 上找到了一些信息：
在咱们的 CMS 上，2021 年 iPad 的使用率仿佛在 1.7% 左右。这波及 659 个网站，均匀每月的页面浏览量为 350 万到 4 百万。
咱们每月约有 1.86% 的用户应用 iPad。
假如遇到结帐按钮隐没的 iPad 用户中有四分之一的人用电话下单，当初咱们来推断一下：
默认 第三季度财务季度销售额: 1,430,000,000 美元
乘以 0.19: 在线销售额
等于 第三季度在线销售额: 271,700,000 美元
乘以 .0075: 估算散失的 iPad 用户百分比
等于 约 2,032,500 美元: 每季度损失的销售额
乘以 四个季度: 一年有 4 个季度
等于 8,120,000 美元: 因为 100vh 导致的潜在损失额如果修复该结账按钮，那么 Darden 的年收入可能将减少 810 万美元！
相干材料
A Bashful Button Worth $8 Million
翻译打算原文
