FOUC happening in production when using __layout.reset.svelte

[mishrasatyam]

Describe the bug

FOUC is a known issue in development. But it is also happening in production when we use __layout.reset.svelte.
So it should be added to milestone 1.0 since it's happening in production.

Reproduction

I have demonstrated this issue in a github project .
It is a simple project where /user url uses a __layout.reset.svelte and demonstrates the issue. I am using a windows system but I also faced the same while deployment of a project in EC2 Ubuntu 20.04 system.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 1.23 GB / 7.85 GB
  Binaries:
    Node: 16.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.5.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.141
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.84)
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.43
    @sveltejs/kit: next => 1.0.0-next.161
    svelte: ^3.34.0 => 3.42.4

Severity

serious, but I can work around it

Additional Information

The only work around is by not using __layout.reset.svelte which defeats the purpose of having a __layout.reset.svelte.

[benmccann]

On your homepage you have:

  <link rel="stylesheet" href="/_app/assets/start-464e9d0a.css">
  <link rel="stylesheet" href="/_app/assets/pages/__layout.svelte-66e91f8b.css">

But on /user you only have:

<link rel="stylesheet" href="/_app/assets/start-464e9d0a.css">

I wonder if __layout.reset is dynamically imported while __layout is statically imported? If that were the case then this would be the same as #967

This gets generated by Vite and so there's nothing we can do about it in SvelteKit. I searched the Vite issue tracker and don't see anything obviously related. There's a chance that vitejs/vite#4731 might be it. That one has a pending PR (vitejs/vite#4740), so you could test if the PR fixes it. If it doesn't then I'd recommend filing an issue in the Vite issue tracker.

[benmccann]

I just patched that Vite PR in locally and it didn't fix it. Please see if you can reproduce this issue with a Vite project that does not use SvelteKit: https://github.com/sveltejs/kit/#bug-reporting. If you can, please file an issue in the Vite issue tracker. If you cannot, please report back here

[mishrasatyam]

I just patched that Vite PR in locally and it didn't fix it. Please see if you can reproduce this issue with a Vite project that does not use SvelteKit: https://github.com/sveltejs/kit/#bug-reporting. If you can, please file an issue in the Vite issue tracker. If you cannot, please report back here

Hey I don't know any vite project with reset-layout option.

[benmccann]

You don't need reset layout to cause it though. Probably just a dynamic import

[hex-ci]

Vite 2.5.7 version has been released, you can try to see if this version solves your problem.

[mishrasatyam]

Vite 2.5.7 version has been released, you can try to see if this version solves your problem.

Hey, I updated to @sveltejs/kit 1.0.0-next.166 which uses vite 2.5.7 . But the issue is still present.

[UltraCakeBakery]

Just letting you all know this is still an issue

[sethvincent]

I'm hesitant to suggest this as y'all might have different situations, but I was having a flash of unstyled content in production on a page that used __layout.reset.svelte and resolved it by importing the main css file, in my case app.css, into the reset layout file.

This kinda struck me as both unintuitive and expected behavior? I'd be curious if there are other ways the flash of unstyled content can happen as this is the first I've seen it.

[UltraCakeBakery]

I'm hesitant to suggest this as y'all might have different situations, but I was having a flash of unstyled content in production on a page that used __layout.reset.svelte and resolved it by importing the main css file, in my case app.css, into the reset layout file.

This kinda struck me as both unintuitive and expected behavior? I'd be curious if there are other ways the flash of unstyled content can happen as this is the first I've seen it.

I haven't checked this on my end, but I think it may be the SSR going at it again. If you disable javascript and not import the css like you described, does the page ever get its style applied?

[ghostdevv]

If you are using a reset then your stiles are reset, if you import them again they are reapplied, this might mean a user has to download a style sheet twice which that might be the cause of unstyled content. What adapter are you using? (If any)

[brunobely]

I’m seeing this in production using vercel-adapter

[ildar-in]

Using esbuild, esbuild-svelte and esbuild-preprocessor
I had FOUC with import css files in <style> block

<style lang="css" >
  @import '/css/media.css';
  @import '/css/normalize.css';

It is was a problem in 'normalize.css', in code line:

button,
input,
optgroup,
select,
textarea {
  font: inherit;  //<- THIS
}

I was overwrite this in .svelte style and this cause flashing. Removing THIS helps. Just in my case.

[mishrasatyam]

Hey , for tailwind if I import app.css in __layout.reset.svelte too , issue is resolved. So I believe, you have to re import your css files again in __layout.reset.svelte to resolve it.

[rgossiaux]

Just lost a bunch of time debugging an issue related to this & tearing my hair out a bit. This is definitely a footgun, I don't think it's obvious at all (of course it makes some sense in retrospect once you understand that the reset is the cause). IMO we should update the kit docs at https://kit.svelte.dev/docs/layouts#resets to mention that CSS files will need to be re-imported.

[UltraCakeBakery]

Just lost a bunch of time debugging an issue related to this & tearing my hair out a bit. This is definitely a footgun, I don't think it's obvious at all (of course it makes some sense in retrospect once you understand that the reset is the cause). IMO we should update the kit docs at https://kit.svelte.dev/docs/layouts#resets to mention that CSS files will need to be re-imported.

I recommend making a new issue. Recently people have been making lots of changes to the documentation. This will probably get picked up quickly.