Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
useHead causes flicker when hydrating SSR-rendered page
See original GitHub issueEnvironment
- Operating System:
Linux - Node Version:
v16.14.0 - Nuxt Version:
3.0.0-rc.4 - Package Manager:
npm@8.3.1 - Builder:
vite - User Config:
modules,css - Runtime Modules:
@nuxtjs/tailwindcss@5.1.3 - Build Modules:
-
Reproduction
Use useHead to assign some CSS classes to body, and then visit the page:
<script setup lang="ts">
useHead({
bodyAttrs: {
class: 'accent-yellow dark-zinc dark'
}
});
</script>
https://user-images.githubusercontent.com/1329592/177387658-5884e692-6dde-455a-ab0a-34bdefca962f.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
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Your Guide to Website Flicker and How to Deal With It
Flicker happens when content changes happen on render. To avoid flicker, you need to make those content changes before the experience reaches ...
Read more >vue.js - Prevent component flickering on Vite / Vue 3 SSR ...
I must have tried 50 ways of setting this.recipes (in all possible lifecycle hooks too) and all of them still cause a flicker...
Read more >Troubleshoot screen flickering in Windows - Microsoft Support
Try uninstalling the app, here's how: Select the Start button, then select Settings > Apps > Apps & features. It'll take a moment...
Read more >Standard page resizes or flickers for a short time when it loads ...
This issue happens when the Visualforce page contains its own CSS Style section. The flickering is caused by initializing CSS styles by the...
Read more >Five tips to fix a screen flicker - TechRepublic
That doesn't mean flickering can't still happen to a flat screen monitor: Many of the causes of screen flickers are the same in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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)