指定web元件為 CSS height 100vh 在 iOS webkit 中被網址列擋住的問題如何解決 v2

在寫 web component 元件時，常常會有的 modal, list, alert 之類的實作會做 fullscreen 元件。如果此元件是 modal view 的話，它的 position 會是 fixed 或 absolute ，則因 HTML 預設 position 被破壞而導致是在 iOS / iPadOS 的裝置上上下捲動時，address bar 並不會隨之隱藏。此問題不限 iOS Safari 而是所有 iOS 上的 Webkit engine 瀏覽器。

原因

在之前的文章「HTML開發避免 iOS Safari 網址列擋住內文」中我們解決的是可上下滑動的 page (非modal) 無法讓 iOS address bar 自動隱藏的問題，這次是 position: fixed or absolute 的全螢幕 view 的問題，有一點不同。但是根本原因都在於 iOS Safari address bar / toolbar 的實作採用的是 cover / hover 的 UI，因此 iOS 的 height: 100vh 計算是從上方 address bar 的上緣至下方 toolbar 的下緣為止；Android 則是從上方 address bar 的下緣至下方 toolbar 的上緣為止。

解法

解法就是重塑一個新的 100vh 變數

script 程式碼

// In main.js or App.vue mounted()
function setVh() {
  document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}

window.addEventListener('resize', setVh);
setVh();

CSS程式碼

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* use the corrected height */
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;

  /* optional: add safe area insets only for padding */
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}