Eliminating Flash of Unstyled Content (FOUC) in ASP.NET Core 5 MVC

585 Views Asked by Ethan Partridge At 08 January 2022 at 07:03

I have an ASP.NET Core 5 MVC web application that is suffering from "Flash of Unstyled Content" (FOUC). Essentially, my styles show for a short period while the page is loading. I saw this Stack Overflow question about dealing with FOUC, and the suggestions are mainly to hide the page via CSS or JavaScript with a CSS class, then to remove that class to show the HTML after the page is done loading. This seems likes more a "trick" than an actual solution. I've also seen some suggestions to minify your CSS and compress your images. I've already done that, but I still have FOUC.

How can I avoid FOUC, specifically in an ASP.NET Core application?

For my specific case, I have all my links and my stylesheet in my primary shared layout _Layout.cshtml. I have my JavaScript at the bottom of the page after all my HTML. I do have some Razor code at the top of my page, but from my understanding, this code is ran on the server side and should not affect page load times.

Original Q&A

There are 1 best solutions below

Jake Lewis On 08 January 2022 at 07:27

You could try hiding your <html> tag with CSS, and then showing it with a JavaScript window.onload function?

<!DOCTYPE html>
<html style='display: none;'>
<head>
    <script>
        window.onload = function() {
            document.querySelector('html').style.display = '';
        }
    </script>
</head>
<body>
    <h1>My Content</h1>
</body>
</html>

Eliminating Flash of Unstyled Content (FOUC) in ASP.NET Core 5 MVC

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in ASP.NET-CORE

Related Questions in FOUC

Trending Questions

Popular # Hahtags

Popular Questions