不尊重 safari 上的 z-index 位置：sticky答案

【问题标题】：Not respecting z-index on safari with position: sticky不尊重 safari 上的 z-index 位置：sticky
【发布时间】：2018-10-17 21:19:28
【问题描述】：

我在重新设计网站时遇到了一些问题，我在案例研究中有一部分目标是粘性的，一旦你传递了一张图片，目标就会被完成。当我使用全角图像时，我希望目标部分位于下方，并且当您滚动目标已经越过时再次看到它，它在 chrome 和 firefox 上效果很好，但在 safari 上却不行。很奇怪，因为当我使用网络检查器时，safari 中的元素会暂时表现得像它应该的那样，它会在图像下方。

有人知道可以是什么吗？

Example link

【问题讨论】：

标签： css safari z-index sticky safari-web-inspector

【解决方案1】：

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

【讨论】：

我看不到将transform: translate3d(0,0,0) 添加到内容部分或仅添加到图像所在的figure 标记的任何机会。您在哪里看到添加 translate3d 可以解决问题？我很想了解更多。
这是一个快速演示：https://fuel.ie/safaritest/ 简单设置 - 第一个和第二个 div 是 position: sticky ( position: -webkit-sticky )，z-index 为 1 但第三个 Div 是 position:相对于 z-index 为 2。第三个 div 应该滚动到顶部，但在 Safari 中它经常滚动到下方，忽略 z-index（以及通常的 html 堆叠顺序）。调整窗口大小或启动 Web 检查器可立即解决问题。将 transform: translate3d(0,0,0) 添加到第三个 div 解决了它 - 然后它总是滚动到第二个 div 的顶部

【解决方案2】：

这一定是 Safari 的错误，他们实现了 position: sticky 我已将此作为错误报告给 Apple - 也许也这样做？

【讨论】：