css - iframe 中位置为 "fixed"的元素不会在 Safari 中呈现

Question

我们遇到了一个问题，其中 position: fixed; iframe 内 的元素无法正确呈现。我们只在 Safari 的 macOS 上注意到了这一点。

它应该是这样的:

这是 macOS 上的 Safari 的外观(在页面加载时):

在页面加载时，顶部和底部栏不可见。它们在 DOM 中占用空间并且可以被点击但是它们还没有被浏览器“渲染”。正如您在上图中所见，条形显示为空白。

如果我们通过 JS、CSS 或通过调整浏览器大小强制重绘，这些条形图就会出现。然而，我们并不是在寻找如何强制重绘的解决方案。我们的问题是，为什么会发生这种情况？

你可以在这里找到一个活生生的例子:

https://testing.enuvo.ch/user/collect/#collector#/user/overlay

PS:它并不总是发生。有时，当调整浏览器大小并再次尝试时，它会正确显示。我们希望您能重现该问题。

Answer 1

因此 position: fixed 和 z-index 存在一些问题。一些较旧的浏览器对其处理方式略有不同，并以不同的方式处理堆栈上下文。

经过一些尝试和错误后，我设法通过添加以下内容使其与注入(inject)的样式表一起工作:

#ol-main-header,
#cl-footer {
  -webkit-transform: translateZ(0);
}

此外，您应该能够删除不必要的 z-index: 99999。希望对您有所帮助。