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

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -27,8 +27,13 @@ import {
 } from '@vue/runtime-core'
 import { extend } from '@vue/shared'
 
-const positionMap = new WeakMap<VNode, DOMRect>()
-const newPositionMap = new WeakMap<VNode, DOMRect>()
+interface Position {
+  left: number
+  top: number
+}
+
+const positionMap = new WeakMap<VNode, Position>()
+const newPositionMap = new WeakMap<VNode, Position>()
 
 export type TransitionGroupProps = Omit<TransitionProps, 'mode'> & {
   tag?: string
@@ -132,7 +137,7 @@ const TransitionGroupImpl: ComponentOptions = {
             child,
             resolveTransitionHooks(child, cssTransitionProps, state, instance)
           )
-          positionMap.set(child, (child.el as Element).getBoundingClientRect())
+          positionMap.set(child, getRelativePosition(child.el as Element))
         }
       }
 
@@ -170,8 +175,18 @@ function callPendingCbs(c: VNode) {
   }
 }
 
+function getRelativePosition(el: Element): Position {
+  const elRect = el.getBoundingClientRect()
+  const parentRect = el.parentElement?.getBoundingClientRect()
+
+  return {
+    left: elRect.left - (parentRect?.left || 0),
+    top: elRect.top - (parentRect?.top || 0)
+  }
+}
+
 function recordPosition(c: VNode) {
-  newPositionMap.set(c, (c.el as Element).getBoundingClientRect())
+  newPositionMap.set(c, getRelativePosition(c.el as Element))
 }
 
 function applyTranslation(c: VNode): VNode | undefined {