iOS15 Safari打开模态框时底部导航栏显示异常问题求解

这个问题根源于iOS15重构了Safari的视口计算逻辑：100vh默认不会跟随导航栏的展开/收缩动态调整，软键盘唤起收起后存在视口高度不主动重绘的bug，才会出现底部被Website Tinting填充的空白区域，可根据场景选择以下解决方案：

方案1：CSS端用-webkit-fill-available适配（最便捷） #

这个是Safari内置的私有属性，会自动填充可用的视口高度，自动适配导航栏的状态：

/* 先给根元素设置基础适配 */
html, body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
.modal {
  position: fixed;
  inset: 0; /* 等价于top/right/bottom/left都为0 */
  height: -webkit-fill-available;
}

方案2：使用动态视口单位dvh做兼容 #

CSS新的动态视口单位dvh会自动根据浏览器UI的变化调整高度，配合特性判断做降级兼容即可：

.modal {
  height: 100vh; /* 低版本浏览器降级 */
  height: 100dvh; /* 支持动态视口的浏览器直接用 */
}
/* 仅针对iOS Safari单独适配 */
@supports (-webkit-touch-callout: none) {
  .modal {
    height: -webkit-fill-available;
  }
}

方案3：JS端强制触发视口重绘（解决软键盘收起后不回弹的bug） #

如果问题出在软键盘收起后才出现空白，可以监听输入框失焦事件，主动触发Safari重新计算视口高度：

document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('blur', () => {
    // 小幅滚动触发重绘，不影响用户当前滚动位置
    const scrollTop = window.pageYOffset
    window.scrollTo(0, scrollTop + 1)
    window.scrollTo(0, scrollTop)
  })
})

方案4：模态框弹出时锁定body滚动 #

如果你的场景下模态框打开时不需要背景页面滚动，可以直接锁定body滚动，避免触发导航栏自动收缩，从根源避免问题：

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

打开模态框时给body添加modal-open类，关闭时移除即可。

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