Skip to content

Commit 2b0e30d

Browse files
committed
Force layout before startViewTransition
1 parent c2a1961 commit 2b0e30d

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1669,6 +1669,12 @@ function customizeViewTransitionError(
16691669
return error;
16701670
}
16711671

1672+
/** @noinline */
1673+
function forceLayout(ownerDocument: Document) {
1674+
// This function exists to trick minifiers to not remove this unused member expression.
1675+
return (ownerDocument.documentElement: any).clientHeight;
1676+
}
1677+
16721678
export function startViewTransition(
16731679
rootContainer: Container,
16741680
transitionTypes: null | TransitionTypes,
@@ -1698,8 +1704,7 @@ export function startViewTransition(
16981704
mutationCallback();
16991705
if (previousFontLoadingStatus === 'loaded') {
17001706
// Force layout calculation to trigger font loading.
1701-
// eslint-disable-next-line ft-flow/no-unused-expressions
1702-
(ownerDocument.documentElement: any).clientHeight;
1707+
forceLayout(ownerDocument);
17031708
if (
17041709
// $FlowFixMe[prop-missing]
17051710
ownerDocument.fonts.status === 'loading'
@@ -1898,6 +1903,10 @@ export function startGestureTransition(
18981903
? (rootContainer: any)
18991904
: rootContainer.ownerDocument;
19001905
try {
1906+
// Force layout before we start the Transition. This works around a bug in Safari
1907+
// if one of the clones end up being a stylesheet that isn't loaded or uncached.
1908+
// https://bugs.webkit.org/show_bug.cgi?id=290146
1909+
forceLayout(ownerDocument);
19011910
// $FlowFixMe[prop-missing]
19021911
const transition = ownerDocument.startViewTransition({
19031912
update: mutationCallback,

0 commit comments

Comments
 (0)