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

【问题标题】：Elements with position "fixed" inside an iframe are not rendering in Safariiframe 中位置“固定”的元素不会在 Safari 中呈现
【发布时间】：2017-09-01 19:36:09
【问题描述】：

我们遇到了一个问题，即带有position: fixed; 在 iframe 内 的元素无法正确呈现。我们只在 macOS 的 Safari 上注意到了这一点。

它应该是这样的：

这是 macOS 上 Safari 的样子（在页面加载时）：

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

如果我们通过 JS、CSS 或通过调整浏览器大小来强制重绘，就会出现条形图。然而，我们并不是在寻找如何强制重绘的解决方案。我们的问题是，为什么会发生这种情况？

你可以在这里找到一个活生生的例子：

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

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

【问题讨论】：

不确定是否重绘，但我想指出一个问题，您的 noscript 块会呈现您输入的文本的标签。
@abluejelly 感谢您的通知。当我们复制源代码并将其放在这个测试服务器上时一定发生了这种情况（以便你们可以访问它）。

标签： css macos browser safari webkit

【解决方案1】：

所以position: fixed 和z-index 存在一些故障。一些较旧的浏览器对其处理方式有所不同，并以不同的方式处理堆叠上下文。

经过一番反复试验，我设法通过添加以下内容使其与注入的样式表一起工作：

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

您还应该能够删除不必要的z-index: 99999。希望对您有所帮助。

【讨论】：

虽然它在 Safari 中似乎运行良好，但当覆盖在 Windows 上的 Chrome 中打开时，它会添加明显的“卡顿”：-/ 有什么办法吗？
不看就很难说是哪里出了问题。如果您可以在测试环境中进行更改，我可以检查一下。

【解决方案2】：

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

【讨论】：

请不要在您的答案中添加不相关的链接，因为这些可能会被报告为垃圾邮件。

【解决方案3】：

我试过你的例子，是的，这真的很奇怪。您是否考虑过缓存问题？ 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

【讨论】：

不幸的是没有工作，它仍然在发生。你可以在这里看到它：testing.enuvo.ch/user2/collect/#collector#/user2/overlay
只是为了确定，您能快速更改 iframe 的链接吗？您能否通过以下方式更改当前链接：/user2/overlay/?t=timestamp 或在 php 中：/user2/overlay/?t== time(); ?>
完成！不过仍然在发生：-/
我在没有 iframe 的 iPhone 上遇到了类似的问题。