Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FOUC when loading CSS

See original GitHub issue

Scenario

Given the following element: (See https://github.com/jaysoo/example-react-helmet)

  <Helmet
    style={[{
      cssText: `
        .message {
          text-align: center;
          font-size: 48px;
          color: magenta;
        }
      `
    }]}
  />
  <p className="message">
    Hello World!
  </p>
</div>

I know this is a contrived example, and not how you should be styling React apps. The real world example involves allowing user customization via custom CSS.

Expected

The element is rendered, and the user sees “Hello World!” in large, magenta text.

Actual

The user will see a flash of unstyled content (FOUC) before the <style> is inserted into <head>. This seems to be caused by react-helmet v5’s use of requestIdleCallback, which forces the head tag insertion to happen after the rendered element has been updated in the DOM.

Note: This does not happen with version 3.x.

fouc

Workaround

I don’t see any obvious workarounds, unless something clever is done using onChangeClientState. Suggestions welcomed.

Issue Analytics

State:
Created 6 years ago
Comments:9 (8 by maintainers)

Top GitHub Comments

1reaction

jaysoocommented, Jun 22, 2017

@cwelch5 I was able to get something working in this PR https://github.com/nfl/react-helmet/pull/297. I’d be glad to hear any feedback.

1reaction

cwelch5commented, Jun 20, 2017

@jaysoo Hi, sorry for the delay. Just want to confirm some details and try to understand the issue, because we’ve had a FOUC in version 3.x and we tried to fix in 5.x. Is the Helmet example from above rendered in the root component of your app? If it is, then the requestIdleCallback may have introduced an issue. BUT, if this example is contained in a subcomponent of the app, there are multiple renders of Helmet on the client side, one of which is the root render that wouldn’t include your style. requestIdleCallback was supposed to address this issue and instead of adding more API, I’d like to understand how we can use the callback to correctly fix this.

Oh, and is this server-side rendered as well?

Thanks for the info.

Top Results From Across the Web

Eliminate flash of unstyled content - css - Stack Overflow

If you're experiencing FOUC, find out WHY it's happening and fix that. At the core, this is happening: because your stylesheets are not...

What the FOUC is happening: Flash of Unstyled Content

This situation occurs whenever a Web browser ends up showing your Web page's content without having any style information yet. and the "exactly ......

CSS Flash of Unstyled Content - Steve Souders

This is called the Flash of Unstyled Content (FOUC). In this example the stylesheet is included at the bottom of the document, but...

How to get rid of the Flash Of Unstyled Content - Medium

Step 1: Hide everything! The first thing we want to do is simply to add a CSS instruction so that our body is...

How to prevent Flash of Unstyled Content on your websites

Discover ways to stop Flash of Unstyled Content (FOUC) from occurring ... on the CNN U.S. Edition front page where the CSS failed...