Skip to content
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

Open
OrbisK opened this issue Oct 13, 2024 · 1 comment · May be fixed by #12171
Open

[Bug]: hydration mismatch when having v-show="false" and style="display: <any>" #12162

OrbisK opened this issue Oct 13, 2024 · 1 comment · May be fixed by #12171

Comments

@OrbisK
Copy link
Contributor

OrbisK commented Oct 13, 2024

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

  1. open link
  2. (ssr true)
  3. 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

  • 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

@edison1105
Copy link
Member

a workaround:

<div  style="display:flex"  v-show="bool"> // move v-show to the last one

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants