Flash of site without CSS
theapplegates opened this issue · 5 comments
When I first load the site I get a small flash of the version of the site on the left hand side of the screen. It appears to be the site without CSS applied. When I refresh the page I get the same effect but quicker. When I choose a page I get the same result.
I made a video to demonstrate, because it's hard to explain.
Thanks
Paul
I am using a beta operating system. Apple's Monterey, so that may be the issue. I can't test on a non-beta Mac because mine are all using the beta. So if the solution is not obvious, I say we blame it on the beta and I'll submit a bug report to them.
That seems to be normal behavior in dev mode, actually. Happens on both this repo and my main site repo. Even though Vite loads its server first, it appears to take a moment for Eleventy to get the generated CSS in its head and then produce the proper appearance. Fortunately, this doesn't happen in production.
I knew I forgot to check something. Thanks for clearing it up. I will close this now.
To properly explain the behaviour. In development there is no css file linked in the head which would block rendering. Vite serves assets via it's javascript file, which due to being an es module is implicitly and non-reversably set to defer. So no matter where the script is placed the page will always start rendering while the vite js and therefore the css of the project is still loading.
To properly explain the behaviour. In development there is no css file linked in the head which would block rendering. Vite serves assets via it's javascript file, which due to being an es module is implicitly and non-reversably set to
defer. So no matter where the script is placed the page will always start rendering while the vite js and therefore the css of the project is still loading.
@LostKobrakai — thanks for that explanation!