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

Question

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

以下是它的外观:

这是macOS上的Safari看起来像(在页面加载时):

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

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

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

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