OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Force layout before startViewTransition (#32699)

Browse Source 
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.
This commit is contained in:
Sebastian Markbåge 2025-03-21 10:05:31 -04:00 committed by GitHub
parent ac799e569d
commit e1e740717b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js vendored
View File

@ -1669,6 +1669,12 @@ function customizeViewTransitionError(
return error; return error;
} }
/** @noinline */
function forceLayout(ownerDocument: Document) {
// This function exists to trick minifiers to not remove this unused member expression.
return (ownerDocument.documentElement: any).clientHeight;
}
export function startViewTransition( export function startViewTransition(
rootContainer: Container, rootContainer: Container,
transitionTypes: null | TransitionTypes, transitionTypes: null | TransitionTypes,
@ -1698,8 +1704,7 @@ export function startViewTransition(
mutationCallback(); mutationCallback();
if (previousFontLoadingStatus === 'loaded') { if (previousFontLoadingStatus === 'loaded') {
// Force layout calculation to trigger font loading. // Force layout calculation to trigger font loading.
// eslint-disable-next-line ft-flow/no-unused-expressions forceLayout(ownerDocument);
(ownerDocument.documentElement: any).clientHeight;
if ( if (
// $FlowFixMe[prop-missing] // $FlowFixMe[prop-missing]
ownerDocument.fonts.status === 'loading' ownerDocument.fonts.status === 'loading'
@ -1898,6 +1903,10 @@ export function startGestureTransition(
? (rootContainer: any) ? (rootContainer: any)
: rootContainer.ownerDocument; : rootContainer.ownerDocument;
try { try {
// Force layout before we start the Transition. This works around a bug in Safari
// if one of the clones end up being a stylesheet that isn't loaded or uncached.
// https://bugs.webkit.org/show_bug.cgi?id=290146
forceLayout(ownerDocument);
// $FlowFixMe[prop-missing] // $FlowFixMe[prop-missing]
const transition = ownerDocument.startViewTransition({ const transition = ownerDocument.startViewTransition({
update: mutationCallback, update: mutationCallback,