fix(runtime-dom): inconsistent behaviour on nested transition groups

[daniser]

fixes #1531 close #5385

Summary by CodeRabbit

• Refactor
  • Improved how element positions are calculated for transitions, now measuring positions relative to parent elements for smoother animations. No changes to user-facing features or controls.

[skirtles-code]

For anyone trying to review this, here's the original reproduction, converted to a Playground:

• Playground - main

Here's the same example but running on this PR:

• Playground - this PR

[daniser]

@skirtles-code Done!

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+146 B)	38 kB (+45 B)	34.2 kB (+17 B)
vue.global.prod.js	159 kB (+146 B)	57.9 kB (+38 B)	51.5 kB (+22 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.7 kB
createApp	55 kB	21.3 kB	19.4 kB
createSSRApp	59 kB	23 kB	21 kB
defineCustomElement	59.8 kB	22.8 kB	20.8 kB
overall	68.7 kB	26.3 kB	24 kB

[edison1105]

/ecosystem-ci run

[pkg-pr-new[bot]]

Open in Stackblitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-ssr

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

@vue/compiler-sfc

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 29a1647

[vue-bot]

📝 Ran ecosystem CI: Open

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

[daniser]

Any estimate on when it'll be merged? It's been over a year.

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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

[edison1105]

/ecosystem-ci run vite-plugin-vue

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
vite-plugin-vue	:white_check_mark: success	:x: failure

[coderabbitai[bot]]

Walkthrough

Updated TransitionGroup position-tracking to compute and store element positions relative to their parent via a new getRelativePosition(el: HTMLElement): Position helper; replaced direct offset usage with this helper and adjusted Position type ordering.

Changes

Cohort / File(s)	Change Summary
TransitionGroup core packages/runtime-dom/src/components/TransitionGroup.ts	Added getRelativePosition helper; changed positionMap/newPositionMap to store Position objects (left/top); replaced direct offset reads with getRelativePosition calls; reordered Position fields.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review logic in getRelativePosition for edge cases (positioned parents, transforms, scrolling).
• Verify all places that record positions use the new Position shape consistently.
• Check tests or runtime behavior for nested transition-group scenarios referenced in linked issues.

Possibly related PRs

• vuejs/core#6108 — Modifies the same TransitionGroup.ts area: replaces bounding rect/DOMRect usage with a Position {left, top} stored in position maps and adjusts how positions are recorded.

Suggested reviewers

• edison1105

Poem

"I’m a rabbit with a tape and chart,
I measure left and measure top with heart.
Now transitions know where to go,
No more hops that steal the show.
🐇✨"

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.
Title check	✅ Passed	The title accurately describes the main fix: resolving inconsistent behavior in nested transition groups, which is the primary objective of the PR.
Linked Issues check	✅ Passed	The code changes (computing relative positions via getRelativePosition helper) directly address the root cause of inconsistent nested transition group behavior by using parent-relative positioning instead of absolute offsets.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing nested transition group positioning: the Position interface reordering, the new getRelativePosition helper, and its usage in recording initial positions are all focused on the stated objectives.

✨ 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.}