fix(transition-group): correct move translation under scale via element rect

[edison1105]

close #14356

revert #6108
re-fix #6105
reference #9733

Summary by CodeRabbit

• Bug Fixes

  • Improved position tracking and translation calculations in TransitionGroup so moves remain accurate when elements are scaled, reducing visual jitter during transitions.

• Tests

  • Added an end-to-end test verifying move behavior while items are entering to ensure correct transitions during rapid additions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces offsetLeft/offsetTop reads with getBoundingClientRect-based getPosition and adds scale-aware translation calculations in TransitionGroup; adds an e2e test "move while entering" to validate moving behavior during entering items.

Changes

Cohort / File(s)	Summary
TransitionGroup position & translation packages/runtime-dom/src/components/TransitionGroup.ts	Replace offsetLeft/offsetTop with getPosition(el) using getBoundingClientRect(). Initialize positionMap and recordPosition() with getPosition(...). applyTranslation computes dx/dy accounting for element scale (derived from bounding rect), clamps near-1 scales, and applies translations as dx/scaleX, dy/scaleY. Adds getPosition(el: HTMLElement): Position.
End-to-end tests packages/vue/__tests__/e2e/TransitionGroup.spec.ts	Add e2e test "move while entering" that injects move CSS, rapidly appends toasts in a transition-group, and asserts a prior toast moves during the entering phase.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix(TransitionGroup): use offsetLeft and offsetTop instead of getBoundingClientRect to avoid transform scale affect animation #6108: Modifies TransitionGroup position/translation logic using an alternate approach between offset vs. bounding-rect calculations.
• fix(transition-group): run forceReflow on the correct document (fix #13849) #13853: Also touches TransitionGroup move/translation logic (forceReflow / position handling) and may overlap with these changes.

Poem

🐰 I measured bounds with careful paws,
Rects and scales fixed all the flaws,
I nudged the pixels, nudged them right,
Toasts now glide in moonlit flight,
Hooray — the group hops into sight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing move translation calculations in TransitionGroup by using element bounding rect instead of offsetLeft/offsetTop to handle scale transforms correctly.
Linked Issues check	✅ Passed	The code changes directly address both linked issues by replacing offsetLeft/offsetTop with getBoundingClientRect-based position calculation and implementing scale-aware translation logic to fix v-move animations under CSS transforms.
Out of Scope Changes check	✅ Passed	All changes are scoped to TransitionGroup FLIP/move animation fixes: the helper function getPosition, position tracking updates, scale-aware translation logic, and the corresponding e2e test are all directly related to addressing the linked issues.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14360

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

yarn add https://pkg.pr.new/@vue/compiler-core@14360.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14360

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14360.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14360

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14360.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14360

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14360.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14360

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

yarn add https://pkg.pr.new/@vue/reactivity@14360.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14360

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

yarn add https://pkg.pr.new/@vue/runtime-core@14360.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14360

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14360.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14360

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

yarn add https://pkg.pr.new/@vue/server-renderer@14360.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14360

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

yarn add https://pkg.pr.new/@vue/shared@14360.tgz

vue

pnpm add https://pkg.pr.new/vue@14360

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

yarn add https://pkg.pr.new/vue@14360.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14360

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

yarn add https://pkg.pr.new/@vue/compat@14360.tgz

commit: b62ab07

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB (+256 B)	39.2 kB (+118 B)	35.3 kB (+101 B)
vue.global.prod.js	162 kB (+256 B)	59.2 kB (+118 B)	52.6 kB (+56 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.4 kB	16.8 kB
createApp	55.1 kB	21.4 kB	19.6 kB
createSSRApp	59.4 kB	23.2 kB	21.1 kB
defineCustomElement	60.8 kB	23.1 kB	21.1 kB
overall	69.5 kB	26.7 kB	24.3 kB

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/runtime-dom/src/components/TransitionGroup.ts`:
- Around line 203-215: The scale computation for the TransitionGroup move uses
scaleX/scaleY derived from rect and offset sizes and can become 0 or non-finite
(NaN/Infinity), causing invalid transforms when computing dx/scaleX and
dy/scaleY; update the block that calculates scaleX and scaleY (variables el, s,
rect, scaleX, scaleY) to guard against zero or non-finite values by testing
after the divisions and normalizations (e.g., if (!isFinite(scaleX) || scaleX
=== 0) scaleX = 1 and likewise for scaleY) before assigning
s.transform/s.webkitTransform so dx/scaleX and dy/scaleY never produce Infinity
or NaN.

In `@packages/vue/__tests__/e2e/TransitionGroup.spec.ts`:
- Around line 300-388: The test "move while entering" may sample finalTop too
early; in the page().evaluate callback where finalTop is measured (using
setTimeout(..., duration)), add a small buffer to the wait (e.g. duration + 20)
or wait for the element's transitionend event before resolving so finalTop is
captured after the move completes; update the setTimeout that measures finalTop
(and any related timing like overlapDelay if needed) to use the buffered timeout
or transitionend listener to reduce CI flakes.

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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