Safari“位置：固定”在滚动上重叠答案

【问题标题】：Safari "position: fixed" is overlapped on scrollSafari“位置：固定”在滚动上重叠
【发布时间】：2020-08-13 22:27:00
【问题描述】：

在 Safari (Mac)** 上，当我在 Bhooks.com 上滚动时，卡片与网页的页脚和页眉重叠（位置：固定）。到目前为止，我无法弄清楚原因，我希望在这里找到一些帮助。

我还将 Bootstrap 升级到了最新版本，以确保安全。

这是问题的屏幕截图：

我知道这是一个非常具体的错误，并且我没有一个小的最小示例（因为在我的 Mac VM 上开发是一场噩梦）。但至少问题很容易解决，也很容易调试。

感谢您的帮助！

** 就我而言，macOS mojave 10.14.3 和 Safari 12.0.3

【问题讨论】：

【解决方案1】：

这绝对是 Safari 中的 z-index 顺序问题。试试这个 CSS：

.bhooksBookCard {
  -webkit-transform: translate3d(0,0,0);
}

在this thread找到这个解决方案

请尝试让我知道它是否解决了您的问题。在检查器中进行了测试，似乎可以正常工作。

【讨论】：

哦，我只为单个 .card 尝试过，但从来没有尝试过在类本身中尝试 z-index:1 值。它确实不适用于（任何）第一行，但适用于后续行。多么奇怪，但这是向前迈出的一大步。
更改 .hardcover_front 的 z-index 没有帮助，增加页眉或页脚也没有帮助。我还尝试在第一张卡片的前面添加一个带有 z-index: 1 的空 div，但也没有成功。这可能是我应该报告的 Safari 错误，或者你怎么看？
我会更深入地了解您的页面，并通知您。
太棒了！感谢您的帮助，它有效！非常感谢，如果没有你，我不会弄明白的！
太棒了！很高兴为您提供帮助。

【解决方案2】：

看看这个，

移除overflow: auto 和-webkit-overflow-scrolling: touch 从与重叠标签平行的容器中会帮助你

但是，一些滚动问题可能仍然存在

【讨论】：