useHead causes flicker when hydrating SSR-rendered page

[makkarpov]

Environment

• 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>

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

[christian4leaflabs]

I have the same issue, currently using Nuxt 3.0.0-rc.5, in my case I'm using the useHead composable to set htmlAttrs as following

<script setup lang='ts'>
const styles = computed(() => {
  return '--bg-color: black; --accent-color: red;'
})

useHead({
  htmlAttrs: {
    style: styles,
  },
})
</script>

[ffxsam]

I've got the same issue, running 3.0.0-rc.5. I'm using useHead() to set CSS custom vars once the data has been fetched (server-side):

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.

[ffxsam]

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

[danielroe]

would you raise an issue on https://github.com/vueuse/head ? 🙏

[ffxsam]

@makkarpov Thanks, you beat me to it!

[ffxsam]

@makkarpov Has this been an issue for you lately? The bug seems to have just gone away on my end. (knock on wood)