I added a custom .css to my master page, now 2016 on-prem site flickers

Question

I made a copy of Seattle.html and created my own master page. Next, I added a link to the .css in my style library and then applied the master page to the site.

After doing that, my 2016 on-prem site temporarily flickers in Edge, Chrome and IE as I navigate from page to page.

Does anyone know how to fix this and still leave the site with a reference to my .css?

Answer 1

This is called FOUC (Flash of Unstyled Content), and it occurs because when you reference an external style sheet like:

<link rel="stylesheet" type="text/css" href="mystyles.css">

the styles are loaded asynchronously, meaning that the browser continues parsing the DOM and displaying content to the user, and at some point your CSS comes back and your styles are applied.

The easy way around this is to just put your styles in the head of the master page, instead of an external style sheet, like:

<style type="text/css">
    body {
        background-color: blue;
        /* more styles */
    }
    /* more selectors and styles */
</style>

This way the browsers parses and applies your styles before it reaches the DOM elements to which they are applied. This isn't exactly considered best practice as far as separation of concerns goes, but if it's important to you to avoid FOUC, it's an option. This also may not be practical if you have a lot of CSS, and/or it's going to change a lot, or particular if it's going to be changed by a designer that doesn't understand master pages.

Another option is to continue referencing the external style sheet, but add something like this to your master page:

<style type="text/css">
    body {
        display: none;
    }
</style>

Then in your external style sheet, add:

body {
    display: block;
}

This basically hides the body element until your style sheet has been loaded by the browser. When the page is loaded it will just be white (or technically whatever the browser chooses to display when there is no content), and then the body will be shown only after your styles have been applied.

These are the only techniques I can think of to avoid that FOUC effect. SharePoint itself suffers from this, as in forms tend to look pretty ugly when first rendered, and then at some point the styles come in and they look correct.