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

Mobile Safari 不区分 CSS 单元svh and dvh。当视口展开（工具栏缩回）时，这些单元应该产生不同的高度，但它们却产生相同的高度。

Safari 对这些单位的支持是在 WebKit 博客中宣布 https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5/大约一年前。这些单位在规范中进行了描述CSS 值和单位模块级别 4 https://www.w3.org/TR/css-values-4/#viewport-variants.

测试页

这个片段说明了这个错误，就像这个网页 https://donald.net.au/bugs/svh/。请注意，该错误是仅在使用移动 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 and dvh两者都应该完全适合视口，并且元素的大小与lvh应大于视口。

在大视口（工具栏折叠）中查看页面时，元素的大小为dvh and lvh两者都应该完全适合视口，并且元素的大小与svh应小于视口。

换句话说，黄色元素应该是short，粉色元素应该是long和石灰 元素应在短和长之间切换。

实际行为

当工具栏折叠和展开时（使用“隐藏工具栏”菜单选项），两个元素的大小都随着svh and dvh改变它们的大小。有趣的是，黄色元素立即改变大小，石灰元素稍后调整。然而，这里的要点是黄色元素不应该改变它的大小。

这里有一个截图视频 https://donald.net.au/bugs/svh/svh.mp4说明移动 Safari 的这种不正确行为。在运行 iOS 16.4.1 的 iPhone 上拍摄。

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

UPDATE 1

我最初使用 Apple 的 Feeback Assistant 报告了这一情况；以这种方式提交的报告不会公开。然而，我刚刚发现WebKit有一个公共Bugzilla系统，所以我创建了这张票 https://bugs.webkit.org/show_bug.cgi?id=261185对于这个问题。

UPDATE 2

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

这可能是预期的行为。

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

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

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

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

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

如果 SVH 和 DVH 的行为彼此不同，那么对开发人员来说会更有用 - 然后我们可以选择我们想要使用的值。他们表现得相同是没有任何用处的。因此，我继续反对移动 Safari 中实施 SVH 单元的方式。

UPDATE 3

好消息，在过去几天（2023 年 11 月），此错误有了一些进展。首先，来自负责该错误的人员的评论：

我同意这是意外的行为。

受让人还发布了一个修复程序，他声称该修复程序可以解决该问题，但我们必须等待该修复程序经过审查和部署才能验证。