在 Safari 上使用 position: sticky 属性时无法正确显示 z-index。

Question

我在进行网站重新设计时遇到了一些问题，在案例研究中有一个目标部分是粘性的，一旦你通过一个图像，该目标就会被划掉。由于我正在使用全宽度图像，所以我希望目标部分可以在下面显示，并且当你滚动时再次看到它时，目标已经被划掉了。在chrome和firefox上效果很好，但在safari上却不行。奇怪的是，当我使用Web Inspector时，Safari中的元素表现出应该有的行为，但只是瞬间，然后就会被图像覆盖。有人有什么想法吗？ 示例链接

- Ramiro Ruiz

Answer 1

将transform: translate3d(0,0,0);添加到非粘性div中似乎可以在Safari中修复它。

- Neil Creagh

---

我认为在内容部分或仅在包含图像的“figure”标签中添加transform: translate3d(0,0,0)并不能解决问题。你在哪里看到添加translate3d可以解决问题？我很想深入了解一下。 - Ramiro Ruiz

这是一个快速演示：https://fuel.ie/safaritest/。简单的设置-第一个和第二个div使用position: sticky ( position: -webkit-sticky )，z-index为1，但第三个Div使用position: relative，z-index为2。第三个div应该在顶部滚动，但在Safari中它经常在下面滚动，忽略了z-index（以及通常的html堆叠顺序）。调整窗口大小或立即启动Web检查器可以立即解决此问题。将transform:translate3d(0,0,0)添加到第三个div中即可解决它-然后它始终在第二个div上方滚动。 - Neil Creagh

为了让人们在不打开编辑器的情况下确认问题已解决，这里提供了一个版本的 https://fuel.ie/safaritest/，其中第三个元素添加了 .safarifix { transform: translate3d(0,0,0); } 类。 https://cdpn.io/pen/debug/ZExaJKp?authentication_hash=mWkoNYWnoWdA - Quinn Keaveney

Answer 2

这似乎是Safari在实现position: sticky时的一个bug。我已经向苹果报告了这个问题，你也可以这样做。

- Neil Creagh