Mobile Safari不區分CSS單元svh和dvh。這些單位 應該隨著視口的擴展(工具欄的收縮)產生不同的高度，然而它們卻產生相同的高度。

大約一年前，WebKit博客中宣布了Safari對這些單元的支持。規范CSS值和單位模塊級別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>

這是瀏覽器渲染引擎的一個bug，已經報告給蘋果了。