fix(TransitionGroup): use offsetLeft and offsetTop instead of getBoundingClientRect to avoid transform scale affect animation

[joo1es]

Fix #6105
use offsetLeft and offsetTop replace Element.getBoundingClientRect

Summary by CodeRabbit

• Bug Fixes

  • Fixed incorrect move animations in TransitionGroup when used inside scaled containers, ensuring items transition to the correct positions.
  • Improved position tracking for smoother, more reliable list reordering animations.

• Tests

  • Added an end-to-end test verifying TransitionGroup behavior within a scaled container to prevent regressions.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	102 kB (+26 B)	38.7 kB (+14 B)	34.9 kB (+24 B)
vue.global.prod.js	160 kB (+26 B)	58.6 kB (+8 B)	52.2 kB (-5 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.8 kB	18.3 kB	16.8 kB
createApp	54.9 kB	21.3 kB	19.5 kB
createSSRApp	59.1 kB	23.1 kB	21 kB
defineCustomElement	60.3 kB	23 kB	21 kB
overall	69.1 kB	26.5 kB	24.2 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@6108

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@6108

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@6108

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@6108

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@6108

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@6108

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@6108

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@6108

@vue/shared

npm i https://pkg.pr.new/@vue/shared@6108

vue

npm i https://pkg.pr.new/vue@6108

@vue/compat

npm i https://pkg.pr.new/@vue/compat@6108

commit: 0b3f640

[edison1105]

• Playground
• Playground with this PR

To be sure, the problem was fixed.
re-use test case from #9733

[coderabbitai]

Walkthrough

TransitionGroup now records element positions using offsetLeft/offsetTop via a new Position interface, replacing DOMRect from getBoundingClientRect. Corresponding WeakMap types and recordPosition logic were updated. An e2e test was added to validate movement under a scaled container; the same test appears twice in the test file.

Changes

Cohort / File(s)	Summary
TransitionGroup position tracking packages/runtime-dom/src/components/TransitionGroup.ts	Introduced Position { left, top }. Switched positionMap/newPositionMap types from DOMRect to Position. Replaced getBoundingClientRect with offsetLeft/offsetTop for both initial and new position recording. Updated recordPosition accordingly.
E2E tests for scaled container packages/vue/__tests__/e2e/TransitionGroup.spec.ts	Added “with scale” test verifying item movement under a parent transform: scale(.5), asserting top changes during reorder. The test block is duplicated in the file.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant TG as TransitionGroup
  participant DOM as DOM Elements

  U->>TG: Trigger reorder
  TG->>DOM: Record old positions (left/top via offset*)
  TG->>DOM: Patch/reorder VNodes
  TG->>DOM: Record new positions (left/top via offset*)
  TG->>DOM: Compute deltas and apply move class (.v-move)
  Note over TG,DOM: Movement based on offsets (not getBoundingClientRect)
  DOM-->>U: Play transition

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

:cake: p2-nice-to-have

Suggested reviewers

• edison1105

Poem

A hop and a flip in a scaled little room,
I measured by offsets to banish the zoom.
No rectangles warped, no bounding-box swoon—
Just lefts and tops dancing, all perfectly in tune.
Thump-thump, says the rabbit: transitions that bloom! 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues Check	✅ Passed	The PR directly replaces getBoundingClientRect with offsetLeft and offsetTop in TransitionGroup as specified by issue #6105 and adds a relevant end-to-end test to verify behavior under CSS transforms.
Out of Scope Changes Check	✅ Passed	All changes in TransitionGroup and its tests are directly related to addressing transform scale effects in animations as outlined in issue #6105, with no unrelated modifications introduced.
Title check	✅ Passed	The title directly summarizes the main change: replacing getBoundingClientRect with offsetLeft/offsetTop in TransitionGroup to fix transform scale affecting animations.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
test-utils	✅ success	✅ success
vuetify	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
router	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vue-i18n	❌ failure	❌ failure
vant	✅ success	❌ failure
vue-simple-compiler	✅ success	✅ success
vueuse	✅ success	✅ success
vue-macros	✅ success	✅ success
radix-vue	✅ success	✅ success
vitepress	✅ success	✅ success