仅在 Firefox 中无样式内容 (FOUC) 的 Flash答案

【问题标题】：Flash of unstyled content (FOUC) in Firefox only仅在 Firefox 中无样式内容 (FOUC) 的 Flash
【发布时间】：2018-09-19 20:28:59
【问题描述】：

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

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

【问题讨论】：

您是否尝试过在缓存过期时增加？从外观上看，它在加载时到期imgur.com/a/yXaLT
嗨。你找到解决这个问题的方法了吗？现在我遇到了和你一样的问题，没有人能帮上忙。

标签： javascript html css firefox fouc

【解决方案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 只是为了便于阅读：在我的例子中，这段代码每页运行一次。我知道这很脏，所以你可以在单独的 JS 文件中添加这段代码。

问题出在 Firefox Quantum v65 中。

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

【讨论】：

谢谢你，这解决了我的问题。这是错误：bugzilla.mozilla.org/show_bug.cgi?id=1420362

【解决方案2】：

将主体可见性设置为隐藏，然后在单独的 JavaScript 文件中添加一个 onload 函数以使其再次可见。我们实际上所做的是在加载文档之前稍微减慢页面以加载样式。

我所做的是将一个类设置为body <body class="hidden">，然后是css .hidden {visibility: hidden}，然后是javascript：

const body = document.querySelector(".hidden");


window.onload = () => {

   body.removeAttribute("class");

}

【讨论】：