You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When my styles change, the page flashes without any styling for a second or so, it's verry jarring I thought it was actually reloading.
Cause
After some debugging I found out the cause:
When a css stylesheet is loaded through <link> (i.e. in the main HTML page), the HMR logic is simply to update its href but that can cause issues, here's what happens in my project:
Multiple css are HMR at the same time, some are imported by JS, the main one is <link> in index.html.
At HMR time, Vite fetches the imported ones, to later replace <style> nodes.
At the same time it fetches the updated style sources, Vite simply updates the href of <link>. This triggers a network request by the browser and on my project, it takes ~700ms to complete.
Before that completes, Vite receives some responses and starts updating <style> tags. This triggers a CSS repaint by the browser.
Because the <link href> was changed but has not completed fetch yet, the browser just ignores it. Old CSS rules are not applied anymore.
And this is why there is a lot of unstyled content on my page...
Until the <link> fetch completes, and browser repaints again with all CSS rules back in place.
Fix ideas
To avoid FOUC, one should not change href or remove <link> tags before the new styles are loaded.
Maybe Vite could add a new <link> tag with the new href just after the old one, and remove the old one when the new one finishes loading.
Reproduction
Sorry, no repro on this one. The setup is just to have link and imported style and trigger a reload of all, which is automatic if you use tailwind ;)
To make the effect clearly visible, you need to have larger styles in <link> (so it takes longer to reload than the styles), or use something to breakpoint the network request, e.g. Fiddler. Just let the style request go through and block (for a while) the <link> request.
You'll see that once the <style> request completes, the page repaints without styles, and it's fixed when the <link> request completes.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Describe the bug
Problem
When my styles change, the page flashes without any styling for a second or so, it's verry jarring I thought it was actually reloading.
Cause
After some debugging I found out the cause:
When a css stylesheet is loaded through
<link>
(i.e. in the main HTML page), the HMR logic is simply to update its href but that can cause issues, here's what happens in my project:<link>
in index.html.<style>
nodes.<link>
. This triggers a network request by the browser and on my project, it takes ~700ms to complete.<style>
tags. This triggers a CSS repaint by the browser.<link href>
was changed but has not completed fetch yet, the browser just ignores it. Old CSS rules are not applied anymore.<link>
fetch completes, and browser repaints again with all CSS rules back in place.Fix ideas
To avoid FOUC, one should not change href or remove
<link>
tags before the new styles are loaded.Maybe Vite could add a new
<link>
tag with the new href just after the old one, and remove the old one when the new one finishes loading.Reproduction
Sorry, no repro on this one. The setup is just to have link and imported style and trigger a reload of all, which is automatic if you use tailwind ;)
To make the effect clearly visible, you need to have larger styles in
<link>
(so it takes longer to reload than the styles), or use something to breakpoint the network request, e.g. Fiddler. Just let the style request go through and block (for a while) the<link>
request.You'll see that once the
<style>
request completes, the page repaints without styles, and it's fixed when the<link>
request completes.System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: