-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
[Bug]: hydration mismatch when having v-show="false"
and style="display: <any>"
#12162
Labels
Comments
a workaround: <div style="display:flex" v-show="bool"> // move v-show to the last one |
rstoenescu
added a commit
to quasarframework/quasar
that referenced
this issue
Oct 19, 2024
This also affects our documentation website (Quasar). We had to revert to Vue 3.4.20 to avoid this issue. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Vue version
3.5.12
Link to minimal reproduction
https://play.vuejs.org/#__SSR__eNp9kTFPwzAQhf/KyUuX0g4wRSkSoA4wAAJGLyG5tC6Obfkuaasq/52zq5YOqPLiu/fe6TvdQT2EMBt6VIUqqY4mMBByH+61M13wkeEAEVsYoY2+g4lYJ9qlV3tHDN/eW1hAW1lC7cr5cYakpWDsgq0YpQIoGzMADDe09tuFVimnFRDvLUrZGBLrvmgt7rTKAQBG4hydS1Z65fxiopoqJmFozWq2Ie9kgUMya1X7LhiL8S2wEUatCshK0ipr/fYl9zj2OD316zXWP//0NyQ4hXzeIxLGAbU6a1zFFfJRXn6+4k7+Z7HzTW/FfUX8QPK2T4xH22PvGsG+8GXa53wG41ZftNwxOjotlUCTc8x+reQ0T1dW/8O9nd3lnHajGn8B/wGq4g==
Steps to reproduce
What is expected?
no mismatch
What is actually happening?
[Vue warn]: Hydration style mismatch on <div style="display: none;"> test
rendered on server: style="display:flex;"
expected on client: style="display:flex;"
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.
at
rendered on server: style="display:flex;"
expected on client: style="display:flex;"
is actually not a mismatch :)
System Info
Any additional comments?
i think this should not be a mismatch.
v-show
withdisplay="style:xxx"
should render the same on server and clientThe text was updated successfully, but these errors were encountered: