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

close #13849

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index ebd16a12a3e454ef94d9c8fa22cfae354ff3f576..9ee9a8e08205463d5c39d979c7a6b75689eecf3c 100644 (file)
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/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
 }

diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
index 33a1533c72576bf2eb84543c9adebdb5e32d91ce..3ba59f068c11e620f813f193f98ac4dd23d41ff5 100644 (file)
--- a/packages/runtime-dom/src/components/TransitionGroup.ts
+++ b/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