FOUC on production

[benaltair]

Describe the bug

A flash of unstyled content (FOUC) is observable in a production website when navigating between internal pages that use rel=external. I support this is equivalent to initial page load, but one would expect core CSS to be cached between navigations, even if the JS router isn't used.

Reproduction

This bug can be seen when previewing this branch on Netlify:
https://github.com/bahaistudies/conference/tree/fouc-issue

Preview URL:
https://60ef3d3188cba400089995e6--abs2021.netlify.app/

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
    Memory: 11.39 GB / 31.92 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.20 => 1.0.0-next.20
    @sveltejs/kit: ^1.0.0-next.125 => 1.0.0-next.125
    svelte: ^3.38.3 => 3.38.3

Severity

blocking an upgrade

Additional Information

Unfortunately this sort of FOUC stops us from using Kit in production, as it's quite noticeable. We will work to try the JS router again in the coming days, but it had bugs with handling load and would often not navigate, so I have concern about using that.

Best case I suppose, would be to find out that it's an issue with our repo in particular. After reviewing a similar issue (#915) it seems others (towards the bottom) may have similar issues. I have noticed the issue get worse after upgrading from "@sveltejs/kit": "^1.0.0-next.121" to "@sveltejs/kit": "^1.0.0-next.125" as noted here: #915 (comment)

I'm creating a separate issue since #915 addresses dev mode only, which is Vite's territory.

[benaltair]

I'm unclear at this point if the upgrade played a significant role. If anyone has any ideas on testing it, I'd be happy to do some tests. When upgrade/downgrading so far I see the issue minimize quite a lot on earlier versions, but it still occasionally happens.

[sdelon]

I have the exact same problem with the latest version of sveltekit (127), svelte (3.38.3) and adapter-netlify (21) and without using rel=external.

[rosslh]

Could this be related to #962?

[benaltair]

Interesting. I tried throttling the network speed to Slow 3G in dev tools and it looks like it actually:

1. Shows proper styling on initial load
2. Flashes unstyled content
3. Finally loads proper styles

This seems to suggest that it's not a classic FOUC issue that you'd get with a vanilla HTML/CSS website, stemming from network requests. I think that's part of the delay (the flash is much longer on slow connections) but this seems like an architectural issue more than anything

Conference_.In.the.Footsteps.of.Abdu.l-Baha.-.Google.Chrome.2021-07-15.10-09-10_1.mp4

The video is dimmed from the compression 🤷🏻‍♂️

[istarkov]

Have exactly same as on @benaltair video for all prerendered pages using static-adapter.
And everything is fine with node-adapter.

[istarkov]

For me workaround of this bug is to reverting svelte to 3.38.2 seems like its same issue as sveltejs/svelte#6463

[f-elix]

For what it's worth, I have this exact issue with svelte 3.38.3 and netlify-adapter without any pre-rendering (so all ssr'd on request). Reverting to svelte 3.38.2 fixes the issue, so I don't think the problem is from the Sveltekit version.

[benmccann]

sveltejs/svelte#6449 was merged into master. Not released yet. Though 3.39.0 was released with other fixes

[benmccann]

Svelte 3.40.0 has been released. I expect that this should be fixed now

[benmccann]

Correction. You will need to update to both Svelte 3.40.0 and SvelteKit 1.0.0-next.135