TransitionGroup: Incorrect move animation when element has transform: scale()

[boobam22]

Vue version

3.5.22

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2zAM/SucD3ULJE6zdRcvHfaBHrbDNmy7zTuoMpOokSWBkt0UQf57KTl2cmiL+iS990g+0tQu++xc0bWYldnCS1IugMfQOtDCrK6rLPgq+1gZ1ThLAXZAuIQ9LMk2kHNYXpnKSGt8DNMoA9ZwHUXnS6E9XlRmMevTchK+BGycFgH5BrCoVQdSC++5ECcJQhmkVA/4WwQSxqugrJmuyLbugB8CN/jAYbd2W2VQDln+5Qzkk6OZszPIh0v+n6WfpFZyw9ITv2+GM9dezDj54GD2pIVBwvSxHb768KARvLQOa0aKsSXYxbBbSzVSCW/dFrzVqgZpSegPkWsErZRh7vKSWdEGm+B7VYd1CVcRTYDwjo1OSbClEuaM7WPpgrt+tshaUCBsPb42JUBqe2mpmVpSyZhEE5DGeuPwUtFRXnL3QuP5vHh/MWq7aWM7PFH286zbVJJzz32v5VWJE+TRZRNePB7fUq2KO28Nb2cKj2vSOKWRfroYy8tZ9okjJ7S2998TFqjFyYDLNcrNE/id590p+fCL0CN1WGUjF/iHYOjpmz8/cMvnkWxs3WpWv0D+Rp5+Gz32si+tqdn2iS65/ZbelTKrv/5mG5Bnc2gqGo3KfdJXGb+1ry+0frT7rrhKcTzRbP8IKGlOwQ==

Steps to reproduce

• just click box

What is expected?

• should not trigger move behavior of TransitionGroup

What is actually happening?

• box jumps to an incorrect position, then the transition animation starts, gradually moving to the expected position.

System Info

Any additional comments?

In Vue’s <transition-group>, element movements are detected by comparing their positions using each element’s DOMRect. When a move is triggered, at time 0s, the element is temporarily translated to its previous position using the transform: translate(...) property, and then a transition animation begins.

However, if an element already has a transform property that includes scaling (e.g. scale(...)), the computed DOMRect positions will be offset—unless the element’s transform-origin is set to left top.

[edison1105]

duplicate of #6105