Flash of Unstyled Content (Fouc) in Firefox Only? Is Ff Slow Renderer

Flash Of Unstyled Content (FOUC) in Firefox 3.5+

I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab

alt text

the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.

I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.

It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.

Flicker of unstyled content in Firefox

you can use jQuery for this

$(document).ready(function() {
  $('#flash').hide();
});

where #flash is the div that contains your unstyled content. check this link for more details

Eliminate flash of unstyled content

None of the CSS-only solutions presented here work with modern browsers (asynchronous loading of css and fonts). You have to use Javascript. What I've done to avoid FOUC is:

<html>
  <body onload="document.body.style.visibility=`visible`;">
    <script>document.body.style.visibility=`hidden`;</script>

With this approach the body of my web page is kept hidden until the full page and CSS files are loaded. Once everything is loaded, the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.

It is a simple solution but so far it is working.

This will not affect users who have disabled Javascript because the <script> tag is ignored.

Flash of Unstyled Content (FOUC) when using gatsby with Emotion?

You're using @emotion/core, which uses the css prop, but you're passing your style tokens to the className prop, which is how you would do it if you're using the emotion package that requires additional setup for server-side rendering to work. See this page in the documentation for a comparison and more details.

The fix is to first remove your css() function calls around your style object literals:

// replace this
export const header = css({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: "1.5rem",
});

// with this
export const header = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "row",
  flexWrap: "wrap",
  marginTop: "1.5rem",
}

Then replace className with css anywhere you're passing in an object or array that you want to work with Emotion:

// replace this
<header className={styles.header}>
  <h1 className={styles.heading}>
    <Link className={styles.headingLink} to={`/`}>
      {title}
    </Link>
  </h1>
  <Bio />
</header>

// with this
<header css={styles.header}>
  <h1 css={styles.heading}>
    <Link css={styles.headingLink} to={`/`}>
      {title}
    </Link>
  </h1>
  <Bio />
</header>

Firefox does not render stylesheet immediately?

Try disabling firebug.