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.