显示模态时iOS15 Safari底部导航栏问题答案

【问题标题】：iOS15 Safari bottom navigation bar issue when showing modal显示模态时iOS15 Safari底部导航栏问题
【发布时间】：2021-12-14 03:32:50
【问题描述】：

我在 iPhone 上将 iOS 更新到版本 15 时遇到了问题。当我向下滚动页面时，我发现 Safari 隐藏了导航栏。没关系，但是当我打开一个模式时问题就来了。

当我使用以下众所周知的样式打开模式时

.modal {
  position: absolute; /* or fixed */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* following is what I tried to, but not work */
  width: 100vw;
  height: 100vh;
}

与

<body>
  ...
  <div class="modal">...</div>
</body>

，底部导航栏区域已空置，并用Website Tinting颜色填充，在iOS15中应用。要重现此问题，

制作模态
在模态中插入输入并自动对焦
键盘向上
隐藏小键盘
导航栏已缩小，导航栏区域仍以着色颜色定位。

我附上一张图片和与这个问题相关的问题链接。

https://lzomedia.com/blog/modal-wont-resize-when-ios-15-safaris-navbar-expands/

【问题讨论】：

标签： html css ios15

【解决方案1】：

尝试将 min-height: 100vh; 设置为 html 元素。

html {
  min-height: 100vh;
}

【讨论】：