The style of the header jitters every time the page is refreshed.

[lzdyes]

Describe the bug

Version: 1.5.0

Built with the latest VitePress version, using the default theme. After the build build is released, the style at the top of the page will shake every time you refresh it, affecting the experience.

Debugging revealed that the issue is caused by a mismatch between the initial styles in the generated HTML file and the styles after subsequent client-side rendering.

After client rendering:

Disable JavaScript in your browser:

Reproduction

I checked the source code and found that it’s likely caused by the watchPostEffect in VPNavBar.vue.

const classes = ref<Record<string, boolean>>({})

watchPostEffect(() => {
  classes.value = {
    'has-sidebar': hasSidebar.value,
    'home': frontmatter.value.layout === 'home',
    'top': y.value === 0,
    'screen-open': props.isScreenOpen
  }
})

This causes the has-sidebar class to be missing from the header in the initially generated HTML.

In contrast, VPContent.vue has normal initial rendering in the HTML.

  <div
    class="VPContent"
    id="VPContent"
    :class="{
      'has-sidebar': hasSidebar,
      'is-home': frontmatter.layout === 'home'
    }"
  >

Expected behavior

You want the header style not to shake when you refresh

System Info

System:
    OS: macOS 14.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 21.70 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Brave Browser: 130.1.71.121
    Chrome: 130.0.6723.117
    Safari: 18.0.1
  npmPackages:
    vitepress: ^1.5.0 => 1.5.0

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.