Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

后端 未结 7 2007
[愿得一人]
[愿得一人] 2021-02-01 16:42

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 befor

相关标签:
7条回答
  • 2021-02-01 16:52

    For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.

    To be precise, in my code I accidentally closed the HTML tag too early, like this:

    <!DOCTYPE html>
    <html lang="en"></html>
    <head>
      <title>My title</title>
    

    The code provided by the original poster is missing the opening <html> so I suspect that's probably whats happening there.

    0 讨论(0)
  • 2021-02-01 16:56

    If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:

    <body>
       <script>0</script>
       <!-- rest of the code -->
    </body>
    

    There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

    0 讨论(0)
  • 2021-02-01 16:56

    I've had the same issue. In my case removing @import rule in the CSS file and linking all the CSS files in the HTML resolved it.

    0 讨论(0)
  • 2021-02-01 17:01

    I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.

    By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.

    0 讨论(0)
  • 2021-02-01 17:03

    Filament Group share they way they load their fonts in detail,

    http://www.filamentgroup.com/lab/font-loading.html

    which is a nice modern approach to @font-face loading

    Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.

    A gist can be found at:

    https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7

    The original article detailing their decision can be fount at:

    http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts

    Additional recommendation

    The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.

    <link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
    <link rel="stylesheet" href="resources/css/main.css" type="text/css" />
    
    0 讨论(0)
  • 2021-02-01 17:16

    I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.

    What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.

    It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.

    <head>
      <link rel="stylesheet" href="css/main.css" />
      <link rel="stylesheet" href="css/other.css" />
    
      <script>
        /*to prevent Firefox FOUC, this must be here*/
        let FF_FOUC_FIX;
      </script>
    </head>

    There was no need to rearrange links or not use imports within css or js files.

    Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.

    0 讨论(0)
提交回复
热议问题