【问题标题】: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中应用。要重现此问题,

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

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

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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-09-22
      • 2021-05-28
      • 2020-06-18
      • 2022-07-11
      • 1970-01-01
      • 2016-02-12
      • 2021-12-03
      相关资源
      最近更新 更多