-
-
Notifications
You must be signed in to change notification settings - Fork 5k
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
useHead causes flicker when hydrating SSR-rendered page #14271
Comments
I have the same issue, currently using Nuxt <script setup lang='ts'>
const styles = computed(() => {
return '--bg-color: black; --accent-color: red;'
})
useHead({
htmlAttrs: {
style: styles,
},
})
</script> |
I've got the same issue, running useHead({
style: [
{
type: 'text/css',
children: `
:root {
--background: ${theme.background};
--background-contrast: ${bgContrastColor.value.toHex8String()};
--faded-overlay: ${fadedOverlay};
--text: ${theme.text};
--link: ${theme.link};
--primary: ${theme.primary};
--primary-faded: ${primaryFadedColor.toHex8String()};
}
`,
},
],
}); The color is correct upon page load (immediately), as it seems this is coming from the server side. But once hydration begins, the page goes white (transparent), and once hydration completes, the color is correct again. However, frustratingly, I can't reproduce this in StackBlitz. |
Here's a video of Chrome watching the background styles and the custom CSS var itself, going starting from the page load (where the vars are not available). Notice how the CSS custom var is lost during hydration. CleanShot.2022-07-18.at.19.15.57.mp4 |
would you raise an issue on https://github.com/vueuse/head ? 🙏 |
@makkarpov Thanks, you beat me to it! |
@makkarpov Has this been an issue for you lately? The bug seems to have just gone away on my end. (knock on wood) |
Your issue gave me hint to reolve my issue :) I was settting primary color on beforeMount :) |
Environment
Linux
v16.14.0
3.0.0-rc.4
npm@8.3.1
vite
modules
,css
@nuxtjs/tailwindcss@5.1.3
-
Reproduction
Use
useHead
to assign some CSS classes to body, and then visit the page:useHead-flicker.mp4
Describe the bug
SSR correctly generates classes on body, then on hydration they are removed and then added again, resulting in a very noticeable flicker, especially when these classes are used to switch between dark and light styles of whole page.
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: