javascript - 仅在 Firefox 中显示无样式内容 (FOUC)

Question

我在我测试过的任何其他浏览器(IE、Chrome、Opera)中都没有看到这个问题，但每当我从服务器加载页面时，我都会在应用 CSS 之前看到一闪而过的无样式内容仅在 Firefox 中。

您可以在您的 Firefox 浏览器中查看此 url，最新版本为 59: https://regalaunpuzzle.es/puzzles-personalizados

Answer 1

在我的例子中，FF 中 FOUC 的原因是页面上存在 iframe。如果我从标记中删除 iframe，那么 FOUC 就会消失。

但出于我自己的黑客原因，我需要 iframe，所以我更改了它

<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>

进入这个

<script>

  document.addEventListener('DOMContentLoaded', ()=>{
    let nBody = document.querySelector('body')
    let nIframe = document.createElement('iframe');
    nIframe.setAttribute('name', "hidden-iframe");
    nIframe.style.display = 'none';
    nIframe.style.position = 'absolute';
    nBody.appendChild(nIframe);
  });
</script>

为了便于阅读，我在模板中添加了这个内联 JS:在我的例子中，这段代码每页运行一次。我知道这是肮脏的 hack，因此您可以将此代码添加到单独的 JS 文件中。

问题出在 Firefox Quantum v65 中。

---

我看到您的页面也有 iframe，所以这种方式可以提供帮助。