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.

noootwo pushed a commit to noootwo/core that referenced this issue Nov 15, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Nov 29, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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