SVH 单元在移动 Safari 中无法正常工作

Question

Mobile Safari 不区分 CSS 单位

svh

和

dvh

。这些单位 视口展开（工具栏缩回）时应该产生不同的高度，但它们却产生相同的高度。

大约一年前，

WebKit 博客宣布了 Safari 对这些单元的支持。这些单位在规范CSS Values and Units Module Level 4中进行了描述。

测试页

此片段说明了该错误，

此网页也是如此。请注意，该错误仅在使用移动 Safari 时可见（在 iPhone 或 iPad 上，或使用 Xcode 附带的模拟器）。

body {
  display: flex;
  gap: 1em;
  margin: 0 2em;
}
div {
  border: 5px solid red;
  box-sizing: border-box;
  width: 5em;
  padding-top: 1em;
  text-align: center;
}
div:nth-child(1) {
  background: cyan;
  height: 100vh;
}
div:nth-child(2) {
  background: yellow;
  height: 100svh;
}
div:nth-child(3) {
  background: lime;
  height: 100dvh;
}
div:nth-child(4) {
  background: pink;
  height: 100lvh;
}

<div>100vh</div>
<div>100svh</div>
<div>100dvh</div>
<div>100lvh</div>

预期行为

当工具栏折叠和展开时，唯一应该改变大小的元素是带有

dvh

 单位大小的元素（石灰色元素）。
其他三个元素应保持固定大小。

在小视口（工具栏展开）中查看页面时，尺寸为

svh

 和 

dvh

 的元素都应完全适合视口，并且尺寸为 

lvh

 的元素应大于视口。

在大视口（工具栏折叠）中查看页面时，尺寸为

dvh

 和 

lvh

 的元素都应完全适合视口，并且尺寸为 

svh

 的元素应小于视口。

换句话说，黄色元素应该是

短，粉色元素应该是长，青柠色元素应该是长

元素应该在短和长之间切换。

实际行为

随着工具栏折叠和展开（使用“隐藏工具栏”菜单选项），使用 

svh

 和 

dvh

调整大小的元素都会更改其大小。有趣的是，黄色元素立即改变大小，石灰元素稍后调整。然而，这里的要点是黄色元素根本不应该改变它的大小。

这里有一个屏幕截图视频

，说明了移动 Safari 的这种不正确行为。在运行 iOS 16.4.1 的 iPhone 上拍摄。

Answer 1

我相信这是浏览器渲染引擎中的一个错误，我已将其报告给Apple。

更新1

我最初使用 Apple 的 Feeback Assistant 报告了此情况；以这种方式提交的报告不会公开。然而，我刚刚发现 WebKit 有一个公共 Bugzilla 系统，所以我为这个问题创建了这张票

。

更新2

Bugzilla 中的票证反馈表明 Safari 可能会按预期运行。反馈表明，由于滚动而“自动隐藏”的工具栏与使用“隐藏工具栏”菜单选项“手动隐藏”的工具栏之间可能存在区别。 这可能是预期的行为。

当工具栏因滚动而自动隐藏时，只有 dvh 大小的条形变化。 svh 大小的条不受影响。这是作为 预计。

但是，当您按下“隐藏工具栏”选项时，您实际上将 关闭自动显示/隐藏功能。由于不再有 工具栏将自动覆盖小视口的部分 viewport 可以解释为与大视口相同， 类似于桌面浏览器。

我不确定这里正确的解释应该是什么。它会 听到实施者的意见很有趣。

您是否有一个特定的用例，其中重要的是小 当用户禁用工具栏时，视口不受影响 完全吗？

如果手动隐藏工具栏是永久性更改，这种状态将持续到我进行另一次手动更改为止，我可以理解在滚动期间将其与暂时隐藏的滚动条区分开来。但这不可能是永久性的改变。手动隐藏工具栏有助于在需要时临时回收一些屏幕空间，但您无法在隐藏工具栏的情况下浏览网页。一旦您需要使用后退按钮或搜索或输入另一个网址，您就需要返回大工具栏，您可以通过点击小工具栏来获得该工具栏。