Safari 100vw 缩放时的布局问题 - 帮助我理解答案

【问题标题】：Safari 100vw Layout issue when zoomed - Help me understandSafari 100vw 缩放时的布局问题 - 帮助我理解
【发布时间】：2017-01-23 23:17:05
【问题描述】：

有没有人看到 Safari 和缩小的问题？我有一个宽度为100vw 的div，当我缩小时，100vw 不会重新计算。

我知道视口单元有一些怪癖，并记录在 canIuse 页面上，但它们似乎都不是我所看到的。我是否在某处缺少相应的属性？

这里有一个 jsFiddle 来演示这个问题。在 Safari 中加载并缩小：https://jsfiddle.net/4vax8Lga/

<body>
<div style="background: red; height: 100vh; width: 100vw; color: white">
  100%width
  <p>Zoom out to see if I fill the entire screen<p>
</div>
<body>

【问题讨论】：

检查你的 jsFiddle 只是改变宽度从 width:100vw;到宽度：100%；它按预期工作。让我知道这是否有帮助
感谢您的回复。我知道 100% 在这里有效，但是在某些情况下 vw 可以解决其他问题。这个例子没有演示 vw over percent 的使用，但是它旨在表明 Safari 和缩放与 vw 有问题。我希望有人看到这个问题并对此有一些反馈，同时仍在使用 vw。

标签： css safari viewport-units

【解决方案1】：

caniuse 实际上缺少有关此错误的信息。我在其他地方报告过，但答案相同：

这是 Safari 中的一个错误，据报道已于 2017 年 11 月关闭。目前尚不清楚它是否会在 Safari 12 中登陆。

错误：https://bugs.webkit.org/show_bug.cgi?id=145614

变更集：https://trac.webkit.org/changeset/225277/webkit

【讨论】：