I've been struggling with a persistent issue for some time now. From what I've gathered, including <link> tags in the <head> of a Firefox page is supposed to halt rendering until those resources are fully loaded. To test this, I inserted a breakpoint in the server-side resource rendering request to prevent the CSS from loading.
Interestingly, in Chrome, Safari, and IE, the page either remains blank or doesn't refresh until I resume the loading process and the CSS kicks in, resulting in a momentary unstyled display followed by the properly styled page.
However, in Firefox, the page initially displays raw HTML (including massive inline SVGs) until I allow the CSS request to finish. This causes a flash of unstyled content (FOUC).
Below is a brief example of the markup structure:
<!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>To address this issue, I've implemented a workaround by initially hiding the
<body style="display:none">core.css to include body { display: block !important }Does anyone have any insights into this behavior? Could there be a specific setting causing this interference? It doesn't seem to occur on other websites and contradicts the behavior I would normally expect.