Blank white page flash when loading fallback page #10006
Comments
|
This happens because without server-side rendering, SvelteKit cannot render the stylesheet import from the layout.svelte file. Therefore, the stylesheet import only occurs after the browser has parsed the JavaScript for client-side rendering (CSR). To workaround this, you can introduce the stylesheet earlier by linking the <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+ <link rel="stylesheet" href="%sveltekit.assets%/style.css" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
When loading the fallback page, a blank white page is shown until the JS loads my stylesheet. This is very annoying if I am using a dark
background-color, because the page flashes from the blank white page to my dark background color.Because the stylesheet is imported in my root
+layout.svelte, I expect SvelteKit to include it in the head element, but it doesn't.Related: #1948
Reproduction
https://github.com/GitRowin/svelte-kit-fallback-flash
Logs
No response
System Info
System: OS: Windows 10 10.0.22621 CPU: (12) x64 AMD Ryzen 5 2600X Six-Core Processor Memory: 8.46 GB / 15.94 GB Binaries: Node: 20.0.0 - C:\Program Files\nodejs\node.EXE Yarn: 3.5.0 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.4.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.50) Internet Explorer: 11.0.22621.1 npmPackages: @sveltejs/adapter-auto: ^2.1.0 => 2.1.0 @sveltejs/adapter-static: ^2.0.2 => 2.0.2 @sveltejs/kit: ^1.18.0 => 1.18.0 svelte: ^3.59.1 => 3.59.1 vite: ^4.3.8 => 4.3.8Severity
annoyance
Additional Information
No response
The text was updated successfully, but these errors were encountered: