Flash of unstyled content (FOUC) in Firefox only

Question

I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied only in Firefox.

You can check this url in your Firefox browser, last version 59: https://regalaunpuzzle.es/puzzles-personalizados

Have you tried increasing when your cache expires? By the looks of things it expires on load https://imgur.com/a/yXaLT — connoraworden, Apr 10 '18 at 12:11
Hi. Have you found fix for this problem? Now I have the same problem as you and no one advice helps. — FlamyTwista, Mar 05 '19 at 14:20

score 1 · Answer 1 · answered Mar 05 '19 at 15:38

In my case the reason of FOUC in FF was the presence of iframe on page. If I removing iframe from markup then FOUC disappears.

But I need iframe for my own hacking reasons so I changed this

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

into this

<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>

I've added this inline JS right in template just for readability: in my case this code runs once per page. I know that it's dirty hack, so you can add this code in separated JS-file.

The problem was in Firefox Quantum v65.

I see that your page has iframe too, so this way can help.

Thanks for this, this fixed the problem for me. Here's the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1420362 — neave, Mar 08 '19 at 09:34

score -1 · Answer 2 · answered Aug 16 '21 at 17:02

Set the body visibility as hidden, then in a separate JavaScript file add an onload function to make it visible again. What we are essentially doing is slowing down the page a bit to load the styles before the document gets loaded.

What I did was set a class to body <body class="hidden">, then is css .hidden {visibility: hidden}, then is javascript:

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


window.onload = () => {

   body.removeAttribute("class");

}

Flash of unstyled content (FOUC) in Firefox only

2 Answers2