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

前端之家收集整理的这篇文章主要介绍了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.希望有所帮助.

猜你在找的CSS相关文章