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

我们遇到的问题是位置元素：固定;在iframe中没有正确呈现.我们只在Safari中的macOS上注意到这一点.

以下是它的外观：

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

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

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

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

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

PS：并非总是如此.有时,在调整浏览器大小并再次尝试时,它会正确显示.我们希望您能重现这个问题.

解决方法

所以位置有一些小问题：固定和z-index.一些较旧的浏览器对它的处理方式略有不同,并以不同的方式处理堆叠上下文.

经过一些试验和错误后,我设法通过添加以下内容来使用注入的样式表：

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

你也应该能够删除不必要的z-index：99999.希望有所帮助.