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

v-bind in CSS values are set after the component's element is already in the DOM #11533

Closed
matej-svejda opened this issue Aug 6, 2024 · 5 comments · Fixed by #11538
Closed
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: sfc-style-vars

Comments

@matej-svejda
Copy link

Vue version

3.4.35

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ul1v2zAM/CuaXuoMrd2s20vmBFuLAtuAfaDLo4DBkZhErSMZEu2mCPLfR8pJZmxr3yTeiTrecSc/Nk3etSAnUrkSYdPUFcJMOSHKRYvonfiga6sfpkrGtX+88ZtGTMWr41nJ2dyvVjUIrgiEiEJT3TtwWBZ9i75detpd2OWglZKiILQsBj/TNepgGxQRsG2oYqlfQLETAZZiL5bBb4SSpFrJ9yc0tT9AecE3nkvRWNo7UjVQT22yZVVHGPHX/WfpY3kuMRJ9aVf5ffSOXNmxdiV5JltD+N6gpXZKTkRCGKvq2j9+STUMLZwf63oN+uE/9fu45ZqSPwJECB2JPGFYhRVgD9/+/AZbOp/AjTdtTewXwDuIvm5ZY0+7bp0h2QNeUvs5eWbdah5vtwguHodioczcJ34ymU17bvQ/cq/yt+mdcnty8Wg/GfhsmN599a1DMMdIz+jBGQXa59VUxpBAimt8ecnhnPhZNhLTGYtQaLxuN7Rq+cKbp5y0XBOH393Ulsp3oDGjlPd/Jz1cdYWlsV060HE9ns15iz9BxX3KggqJU/Skf3YVn3j7tW/AJOJ63EtTuPDBQJiIcbMVFIs1tHmGBmTsMN5E6KrWWXexsM5kh+JIvOY3owMVQ0UBsfmTkytvYgLJbhqLFdDX5PuvDgJnSb5TIPnVO7n/DVR7Vf8=

Steps to reproduce

Click on "Toggle show test component"

What is expected?

The component opens with padding set to 100 initially.

What is actually happening?

The padding is animated from 0 to 100.

System Info

No response

Any additional comments?

This happens because when the component is initially mounted, the v-bind variables aren't set yet. So if onMounted triggers a DOM layout recalculation, then the padding is set to 0, after which it is immediately set to 100, triggering the animation. This didn't happen in older versions (for example 3.4.21).

But there is a similar, probably related issue that happens 3.4.35 and in older versions like 3.4.21: in some cases (I was able to reproduce it using Teleport), mounted in directives can be executed after the component already exists in the DOM but before the v-bind variables are set. If mounted then triggers a DOM layout recalculation, the same animation issue can happen again. Here's the code to reproduce it.

Basically, it would make things a lot easier if there was a guarantee that the element isn't added to the dom before the v-bind values are set to their initial values.

@Procrustes5
Copy link
Contributor

I found this PR. I think it's probably due to the impact of moving functionality to onMounted in this change.
Can I participate in solving this problem?

#8523

@edison1105
Copy link
Member

@Procrustes5
PR welcome~

@edison1105 edison1105 added 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: sfc-style-vars labels Aug 7, 2024
@matej-svejda
Copy link
Author

Thank you for the quick turnaround 🙂 But this doesn't seem to fix the case with directives and Teleport for which I provided the example (this one). At least I can still reproduce the problem when I switch to the latest commit for the Vue version on SFC Playground.

@edison1105 edison1105 reopened this Aug 8, 2024
@edison1105
Copy link
Member

a workaround

mounted: el => {
    // lets recalculate the layout
    nextTick(()=>{
      console.log(el.getBoundingClientRect())
    })
  },

@matej-svejda
Copy link
Author

@edison1105 Thanks, I'm aware of the workaround. It unfortunately doesn't work for my specific case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: sfc-style-vars
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants