Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9U11v0zAU/SsXS2itlCah015CNvGhCcEDINgDqM6DSW+KV8eObCfrVPW/c+20JaBpfanvOce+5x47e/a269KhR1aw0tVWdh4c+r4DJfTmmjPvOLvhWradsR72YLGBAzTWtHBB2y5ec811bbTzIKyF6yCYrfIEXiWwrOaBbXpde2k0uAfRzeaw5xpgRep0EKrHVV4lYe+xWlYVnTKhl//QeVVRywPXZTbaJXNUeGw7JTxSBVCu5QDOPyoMA1ihXWNsW4CrhcLZcg4RC/Ifs6v85aT+Ges4MdCvvAuEDOY/WEOheBEy6dVZQRolYVhQAyIk2QCpg13OoNji4xGkalh43PlzfVNmSp7aZP/1OeG/eu8ptze1kvWWtoYAaWv4e1FmIztOnNHItCqzSRBUxhBobtPhmpB0WLRmwCSuUHu0C0FXc0IUigGPyHhLMZjoqxjXIUjI0ysHKByebyK0ofNZQu+FHkMjN+m9M5oeVTyGs9q0nVRov3ThMHpTxdggcEIp8/ApYt72wcuI17+x3j6B37tdwDj7atGhHZCzM+eF3aAf6dvvnynxCdmada9I/Qz5DZ1RffA4yt71ek22J7ro9mP8HKTe3LnbnUfK6DhUMBqUh6jnjD6R98+M/tfuZXoZ91Gi7PAH6M0zDA==

Steps to reproduce

1. Click the button

What is expected?

No jumps in the transition animation

What is actually happening?

Jump at the very start, because CSS scale is not being taken into account, so the distances are off by a factor of .

System Info

No response

Any additional comments?

See also #6387. Should probably be tested with and without scale() on the child elements too.

This SO post indicates that element.getBoundingClientRect().width / element.offsetWidth should be enough to figure out the scale: https://stackoverflow.com/questions/5603615/how-to-get-the-scale-value-of-an-html-element-using-javascript-or-jquery

However, getBoundingClientRect may be expensive - although it should only need to be called when the transitions start, but if it is too expensive then a way to opt-in would be fine too

It seems like TransitionGroup is already doing getBoundingClientRect(): https://github.com/vuejs/core/blob/1c525f75a3d17a6356d5f66765623c0ae7c0ebcc/packages/runtime-dom/src/components/TransitionGroup.ts#L175-L177

So there should be no problem with the / element.offsetWidth approach, at least