[Fiber] Add context for the display: inline warning (#34461)
This warning doesn't execute within any particular context so doesn't have a stack. Pick the fiber of the child if it exists, otherwise the parent. <img width="846" height="316" alt="Screenshot 2025-09-10 at 12 38 28 PM" src="https://github.com/user-attachments/assets/7ab283a9-6e11-428d-9def-38f80ca958ef" />
Sebastian Markbåge committed
Sep 12, 2025 at 11:55 UTC
93d7aa69b29c20529c40cf64b0afdb5d51c9ddd1
1 file changed
+17
-8
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+17
-8
@@ -1369,14 +1369,23 @@ function warnForBlockInsideInline(instance: HTMLElement) {
1369
node.nodeType === ELEMENT_NODE &&
1370
getComputedStyle((node: any)).display === 'block'
1371
) {
1372
- console.error(
1373
- "You're about to start a <ViewTransition> around a display: inline " +
1374
- 'element <%s>, which itself has a display: block element <%s> inside it. ' +
1375
- 'This might trigger a bug in Safari which causes the View Transition to ' +
1376
- 'be skipped with a duplicate name error.\n' +
1377
- 'https://bugs.webkit.org/show_bug.cgi?id=290923',
1378
- instance.tagName.toLocaleLowerCase(),
1379
- (node: any).tagName.toLocaleLowerCase(),
1372
+ const fiber =
1373
+ getInstanceFromNode(node) || getInstanceFromNode(instance);
1374
+ runWithFiberInDEV(
1375
+ fiber,
1376
+ (parentTag: string, childTag: string) => {
1377
+ console.error(
1378
+ "You're about to start a <ViewTransition> around a display: inline " +
1379
+ 'element <%s>, which itself has a display: block element <%s> inside it. ' +
1380
+ 'This might trigger a bug in Safari which causes the View Transition to ' +
1381
+ 'be skipped with a duplicate name error.\n' +
1382
+ 'https://bugs.webkit.org/show_bug.cgi?id=290923',
1383
+ parentTag.toLocaleLowerCase(),
1384
+ childTag.toLocaleLowerCase(),
1385
+ );
1386
+ },
1387
+ instance.tagName,
1388
+ (node: any).tagName,
1389
);
1390
break;
1391
}