vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.89k stars 6.97k forks source link

[Bug Report][3.6.7] Hydration style mismatch on `z-index` when using multiple `VNavigationDrawers` and `onServerPrefetch` in Nuxt 3 #19871

Open rudolfbyker opened 5 months ago

rudolfbyker commented 5 months ago

Environment

Vuetify Version: 3.6.7 Vue Version: 3.4.27 Browsers: Firefox 126.0 OS: Linux x86_64

Steps to reproduce

  1. Clone https://github.com/rudolfbyker/github-lnygjw or open https://stackblitz.com/~/github.com/rudolfbyker/github-lnygjw
  2. yarn install
  3. yarn run dev or yarn build && yarn preview
  4. Open in browser
  5. Observe "Hydration style mismatch" warnings in the console.

Expected Behavior

No hydration mismatches.

Actual Behavior

[Vue warn]: Hydration style mismatch on 
<nav class="v-navigation-drawer v-na…vigation-drawer--mobile" style="right:0px;z-index:1004;t…sition:none !important;"> 
  - rendered on server: style="right:0px;z-index:1004;transform:translateX(0px);position:fixed;height:calc(100% - 0px - 0px);top:0px;bottom:0px;width:256px;transition:none !important;"
  - expected on client: style="right:0px;z-index:1006;transform:translateX(0px);position:fixed;height:calc(100% - 0px - 0px);top:0px;bottom:0px;width:256px;transition:none !important;"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
[Vue warn]: Hydration style mismatch on 
<div class="v-navigation-drawer__scrim" style="z-index:1003;"> 
  - rendered on server: style="z-index:1003;"
  - expected on client: style="z-index:1005;"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 

Reproduction Link

https://github.com/rudolfbyker/github-lnygjw

rudolfbyker commented 5 months ago

If you would remove either of the VNavigationDrawer components or the call to onServerPrefetch, the hydration mismatch goes away.

benlavalley commented 3 months ago

Hoping they solve this one eventually. Nuxt 3.4.12 / Vuetify 3.6.13 / Vue 3.4.34 and my v-navigation-drawer only works without throwing this warning if I wrap it in ClientOnly.