移动端Safari无法区分svh与dvh单位的技术问题反馈

移动端Safari无法区分CSS单位svh与dvh。在视口扩展（工具栏收起）时，这两个单位本应呈现不同高度，但实际高度一致。

Safari约一年前宣布支持这些视口单位，相关单位在CSS Values and Units Module Level 4规范中有明确描述。

测试页面 #

以下代码片段可复现此问题，注意该bug仅在移动端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。

内容的提问来源于stack exchange，提问作者Brett Donald