在iframe中具有“固定”位置的元素不会在Safari中呈现

Question

我们遇到的问题是，iframe 中position: fixed; 的元素未正确呈现。我们只在Safari中的macOS上注意到这一点。

以下是它的外观：

以下是macOS上的Safari（页面加载时）：

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

如果我们通过JS，CSS强制重绘或通过调整浏览器的大小来显示条形图。但是，我们并不是在寻找如何强制重绘的解决方案。我们的问题是为什么这首先发生？

你可以在这里找到一个实例：

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

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

Answer 1

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

经过一些试验和错误后，我设法通过添加：

来使用注入的样式表

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

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

Answer 2

我试过你的例子，是的，这真的很奇怪。 您是否考虑过缓存问题？ Safari具有缓存iframe的独特行为，也许您的问题来自于这些。

您是否可以尝试更改此iframe的HTTP标头以禁用此缓存？

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 

以下是PHP中的一个示例：

header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
header('Pragma: no-cache'); // HTTP 1.0.
header('Expires: 0'); // Proxies

Answer 3

你必须在iframe文件中写css而不是你的视图文件。