Force layout before startViewTransition (#32699)
This works around this Safari bug. https://bugs.webkit.org/show_bug.cgi?id=290146 This unfortunate because it may cause additional layouts if there's more updates to the tree coming by manual mutation before it gets painted naturally. However, we might end up wanting to read layout early anyway. This affects the fixture because we clone the `<link>` from the `<head>` which is itself another bug. However, it should be possible to have `<link>` tags inserted into the new tree so this is still relevant.
Sebastian Markbåge committed
Mar 21, 2025 at 10:05 UTC
e1e740717ba85597f03fd837a36c7bab5803a0d2
1 file changed
+11
-2
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+11
-2
@@ -1669,6 +1669,12 @@ function customizeViewTransitionError(
1669
return error;
1670
}
1671
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
+
1678
export function startViewTransition(
1679
rootContainer: Container,
1680
transitionTypes: null | TransitionTypes,
@@ -1698,8 +1704,7 @@ export function startViewTransition(
1704
mutationCallback();
1705
if (previousFontLoadingStatus === 'loaded') {
1706
// 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);
1708
if (
1709
// $FlowFixMe[prop-missing]
1710
ownerDocument.fonts.status === 'loading'
@@ -1898,6 +1903,10 @@ export function startGestureTransition(
1903
? (rootContainer: any)
1904
: rootContainer.ownerDocument;
1905
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);
1910
// $FlowFixMe[prop-missing]
1911
const transition = ownerDocument.startViewTransition({
1912
update: mutationCallback,