Flash of unstyled content in dev mode

[mishrasatyam]

Describe the bug
Css feels wierd while reload in dev environment. Works fine with build output

To Reproduce
Using below dependencies:
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",
"svelte": "^3.29.0",
"vite": "^2.1.0"

Video

css_wierd_on_reload.mp4

[benmccann]

This sounds like it could be coming from vitejs/vite#2282

[saturnonearth]

Has anyone noticed this issue on prod? I am having some weird CSS flashes on refresh, even for a cached browser. Seems to happy mainly, if not only, on Chrome for Windows. Not sure if this is a Svelte issue or Chrome

[kpnnkmp]

Has anyone noticed this issue on prod? I am having some weird CSS flashes on refresh, even for a cached browser. Seems to happy mainly, if not only, on Chrome for Windows. Not sure if this is a Svelte issue or Chrome

I definitely have this issue on Brave (chromium) on MacOS as well. Mitigated it by setting the following style on the app.html .

<style>
   html { visibility: hidden; }
<style>

And in the main CSS file I am using, set the visibility to visible !important. Similarly, you can use a :global(html) { ... } on your __layout.svelte for instance.

[saturnonearth]

Has anyone noticed this issue on prod? I am having some weird CSS flashes on refresh, even for a cached browser. Seems to happy mainly, if not only, on Chrome for Windows. Not sure if this is a Svelte issue or Chrome

I definitely have this issue on Brave (chromium) on MacOS as well. Mitigated it by setting the following style on the app.html .

<style>
   html { visibility: hidden; }
<style>

And in the main CSS file I am using, set the visibility to visible !important. Similarly, you can use a :global(html) { ... } on your __layout.svelte for instance.

This seems like a pretty good temporary solution, but I hope this gets fixed in sveltekit as this "fix" would prevent all content from being shown if the CSS fails to download for some reason.

[OG84]

Yep i also get pretty bad flashes with chrome on production. I think because head elements are re–inserted or reordered after hydration.
But I'm using carbon components svelte, so could be also on their side.

[seanlail]

I think because head elements are re–inserted or reordered after hydration.

Do we know where this is happening?

Might not be related but, after updating to the latest Svelte dependency, my Sapper + Rollup app has an issue where every element in the head is reversed.

So this bug might not be related to Kit or Vite (if that assumption above is correct).

[OG84]

Right, this is probably not related to kit.
See sveltejs/svelte#6463 and sveltejs/svelte#6449

[subhendupsingh]

Has anyone noticed this issue on prod? I am having some weird CSS flashes on refresh, even for a cached browser. Seems to happy mainly, if not only, on Chrome for Windows. Not sure if this is a Svelte issue or Chrome

I definitely have this issue on Brave (chromium) on MacOS as well. Mitigated it by setting the following style on the app.html .

<style>
   html { visibility: hidden; }
<style>

And in the main CSS file I am using, set the visibility to visible !important. Similarly, you can use a :global(html) { ... } on your __layout.svelte for instance.

Solution works! Does this in any way impact SEO?

[mcmxcdev]

I noticed this yesterday, FOUC occurs in Chromium based browsers but not Firefox for some reason.

[kpnnkmp]

Solution works! Does this in any way impact SEO?

As far as I could tell not. I am no SEO expert, but I did multiple lighthouse tests and did not see and impact on the performance or SEO scores when doing the tests before and after this fix, many times.

[benaltair]

After upgrading to the most recent next version of Kit, I get FOUC in prod. Here's an example:
https://60ed0aacdb48670007a2bce6--abs2021.netlify.app/

Try navigating to a number of pages - it seems to happen 1/3rd of the time or so. This did not happen before upgrading.

Current version with issue:

		"@sveltejs/adapter-netlify": "^1.0.0-next.20",
		"@sveltejs/kit": "^1.0.0-next.125"

Previous version with fewer issues:

		"@sveltejs/adapter-netlify": "next",
		"@sveltejs/kit": "^1.0.0-next.121"