iOS15 Safari 底部导航栏显示模式时出现问题
当我将 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>
，底部导航栏区域已被清空，并填充了iOS15中应用的Website Tinting颜色。为了重现这个问题，
- 制作模态
- 在模态中插入输入并自动聚焦
- 键盘向上
- 隐藏键盘
- 导航栏尺寸缩小，导航栏区域仍采用 Tinting 颜色定位。
我附上它的图像以及与此问题相关的问题链接。
https://lzomedia.com/blog/modal-wont-resize-when-ios-15-safaris-navbar-expands/
尝试设置min-height: 100vh;为 html 元素。
html {
min-height: 100vh;
}