1

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

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

4

2 回答 2

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，所以这种方式可以提供帮助。

于 2019-03-05T15:38:50.413 回答
0

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

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

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


window.onload = () => {

   body.removeAttribute("class");

}
于 2021-08-16T17:02:03.927 回答