Firefox won't block rendering of HTML when CSS links in head

Viewed 362

I am having a problem that has persisted for a while. Everything I have read about Firefox specifies that if you include the <link> tags in the <head>, it will block rendering of the page until those resources have been loaded. To test, I set a breakpoint in the server-side resource rendering request, to ensure the CSS never loads.

In Chrome, Safari, and IE, the page remains blank or does not refresh until I resume the process and the CSS loads. This results in a blank screen, and then a properly styled page.

In Firefox, the raw HTML (with huge inline SVGs) shows on the page until I allow the CSS request to finish. This results in a flash of unstyled content (FOUC).

Here is a basic example of the markup

<!DOCTYPE html>
<html lang="en-us">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
    <link rel="stylesheet" href="https://cdn.example.com/res/css/core.css?v=1a2b3c4d5e6f7890">
    <link rel="stylesheet" href="https://cdn.example.com/res/css/site.css?v=1a2b3c4d5e6f7890">
    <!-- meta tags, ads, etc -->
    <title>My Page Title</title>
</head>
<body>
    <header>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 24" class="site-logo">...</svg>
    </header>
    <!-- page content -->
    <script type="text/javascript" src="https://cdn.example.com/res/js/site.js?v=1a2b3c4d5e6f7890">...</script>
</body>
</html>

I have a workaround for this issue, inlining <body style="display:none"> and then with core.css including body { display: block !important } in order to simulate the effect I expect for blocked rendering.

Am I missing something critical? Could there be another setting interfering with this behavior? I don't see this happening on other sites, and it goes against the behavior I would expect.

1 Answers

I'm seeing the same thing. Based on a tip here, I placed a non-empty script tag (with just one space, <script> </script>) after the <link> in the header, and that seems to block rendering as expected.

Related