fix(transition-group): run forceReflow on the correct document (fix #13849) (#13853)

close #13849

Author: zusorio

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

@@ -260,11 +260,11 @@ export function resolveTransitionProps(
       // the css will not get the final state (#10677)
       if (!el._enterCancelled) {
         // force reflow so *-leave-from classes immediately take effect (#2593)
-        forceReflow()
+        forceReflow(el)
         addTransitionClass(el, leaveActiveClass)
       } else {
         addTransitionClass(el, leaveActiveClass)
-        forceReflow()
+        forceReflow(el)
       }
       nextFrame(() => {
         if (!el._isLeaving) {
@@ -476,6 +476,7 @@ function toMs(s: string): number {
 }
 
 // synchronously force layout to put elements into a certain state
-export function forceReflow(): number {
-  return document.body.offsetHeight
+export function forceReflow(el?: Node): number {
+  const targetDocument = el ? el.ownerDocument! : document
+  return targetDocument.body.offsetHeight
 }

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

@@ -92,7 +92,7 @@ const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({
       const movedChildren = prevChildren.filter(applyTranslation)
 
       // force reflow to put everything in position
-      forceReflow()
+      forceReflow(instance.vnode.el as Node)
 
       movedChildren.forEach(c => {
         const el = c.el as ElementWithTransition