修复了相对定位 div 内的定位 div 会导致移动 Safari 中出现奇怪的过度滚动行为答案

【问题标题】：Fixed positioned div inside of relative positioned div causes strange overscroll behavior in mobile Safari修复了相对定位 div 内的定位 div 会导致移动 Safari 中出现奇怪的过度滚动行为
【发布时间】：2020-05-29 14:50:05
【问题描述】：

当我将固定 div 放置在相对 div 内，并将固定 div 对齐到视口的底部，然后尝试在移动 Safari（iOS 13）中滚动到底部时，我得到了一个奇怪的效果。看起来 div 好像被一个白色矩形遮住了。有没有办法在不改变外部或内部 div 的 position 的情况下防止这种行为？

.outer {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: auto;
  padding: 5px;
}

.inner {
  color: white;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  width: 100%;
  background: blue;
}

<html>

<head>
</head>

<body>
  <div class="outer">
    <div class="inner">
      test test test <br/> test test test
    </div>
  </div>
</body>

</html>

【问题讨论】：

您是否尝试在.inner 类上设置height 或min-height？

标签： css mobile-safari

【解决方案1】：

.inner 内容超出了.outer 包装器的边界。您需要在 .outer 父级上将 overflow 设置为 visible 以使其内容在其相对父级之外可见。

查看结果：https://codepen.io/romainpetit/pen/BaNLaZr

经过测试。

.outer {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: auto;
  padding: 5px;
}

.inner {
  color: white;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  width: 100%;
  background: blue;
}

【讨论】：