FOUC only in production on latest Firefox

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.8.3

What browser are you using?

Firefox 85.0.1 (64-bit)

What operating system are you using?

Pop_OS! 20.04 (Ubuntu 20.04)

How are you deploying your application?

Vercel

Describe the Bug

I see a FOUC when accessing my production deployment on Firefox:

It seems to disappear when using Chrome or Firefox on mobile.

I also appear to get the same issue for my portfolio website on Firefox:

Expected Behavior

There should be no FOUC.

To Reproduce

1. Visit my production deployment.
2. See FOUC.

Or, to reproduce locally:

1. Clone this repository.
2. Install dependencies (using yarn).
3. Start a development server (using yarn dev:next).
4. Visit http://localhost:3000 and see FOUC.

You’ll need some env files for that reproduction to work correctly. Instead, you can just reproduce the same FOUC using my portfolio website (which is a lot smaller than that repo anyways):

1. Clone this repository.
2. Install dependencies (using yarn).
3. Start a development server (using yarn dev).
4. Visit http://localhost:3000 and see FOUC.

[nicholaschiang]

After some investigation, I think there are a couple of bugs at play here:

1. Firefox’s devtools inspector updates the layout of the page (so you can inspect stuff) before stylesheets have loaded. I’m guessing this is what causes the FOUC when devtools are open (and JavaScript is disabled). Note that this error seems to always occur if the React Developer Tools extension is active. Notice how the “forced layout” console warning doesn’t come from any of the page scripts, but from a node.js:354 Mozilla devtools source file (specifically view-source:resource://devtools/server/actors/inspector/node.js):

1. Any other extension that updates the page before stylesheets have loaded will cause a FOUC. Similar to how the devtools inspector causes a FOUC, any other Firefox extension that tries to access the page layout before stylesheets have loaded will also cause a FOUC. This is why the FOUC goes away when using a private browsing window without any extensions installed.

2. Next.js doesn’t wait for stylesheets to load before executing scripts. This causes a FOUC when one of those scripts tries to access the page layout before stylesheets have been loaded. This is the main issue here that should be addressed by Next.js maintainers. Notice how the “forced layout” console warning comes from one of my page scripts that tries to use window.innerWidth and window.innerHeight:

[elinlutz]

This might help: After hours of troubleshooting sudden FOUC in my next.js app (deployed at Vercel with styled-jsx, problems in production mode only) I discovered that I had styled-jsx installed as a separate package in my app. This created some conflict with next.js built-in styled-jsx. Deleting the package fixed it.