vuejs
[Bug]: hydration mismatch when having `v-show="false"` and `style="display: <any>"`
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
- open link
- (ssr true)
- hydration mismactch
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 <Repl>
-
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 with display="style:xxx" should render the same on server and client
a workaround:
<div style="display:flex" v-show="bool"> // move v-show to the last one
This also affects our documentation website (Quasar). We had to revert to Vue 3.4.20 to avoid this issue.
