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

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

以下是它的外观：

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

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

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

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

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

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

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