-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FOUC happening in production when using __layout.reset.svelte #2349
Comments
On your homepage you have:
But on
I wonder if 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. |
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. |
You don't need reset layout to cause it though. Probably just a dynamic import |
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. |
Just letting you all know this is still an issue |
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? |
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) |
I’m seeing this in production using vercel-adapter |
Using esbuild, esbuild-svelte and esbuild-preprocessor
It is was a problem in 'normalize.css', in code line:
I was overwrite this in .svelte style and this cause flashing. Removing THIS helps. Just in my case. |
Hey , for tailwind if I import |
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. |
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
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.
The text was updated successfully, but these errors were encountered: