发表新帖
发表新帖

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

后端 未结
关注
7 2001
[愿得一人]
[愿得一人] 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)
  • 闹比i
    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)
 看不清?
提交回复
热议问题