[DevTools] Use the scrollWidth/Height for the root when the root is the documentElement (#34651)
If I can scroll the document due to it overflowing, I should be able to scroll the suspense tab as much. The real rect for the root when it's the document is really the full scroll height. This doesn't fully eliminate the need to do recursive bounding boxes for the root since it's still possible to have the rects overflow. E.g. if they're currently resuspended or inside nested scrolls. ~However, maybe we should have the actual paintable root rect just be this rectangle instead of including the recursive ones.~ Actually never mind. The root really represents the Transition so it doesn't make sense to give it any specific rectangle. It's rather the whole background.
Sebastian Markbåge committed
Sep 30, 2025 at 14:37 UTC
554a373d7e0202a6f54e28e8258497bdc3377b21
1 file changed
+16
-1
packages/react-devtools-shared/src/backend/fiber/renderer.js
+16
-1
@@ -2251,8 +2251,23 @@ export function attach(
2251
}
2252
if (typeof instance.getClientRects === 'function') {
2253
// DOM
2254
- const result: Array<Rect> = [];
2254
const doc = instance.ownerDocument;
2255
+ if (instance === doc.documentElement) {
2256
+ // This is the document element. The size of this element is not actually
2257
+ // what determines the whole scrollable area of the screen. Because any
2258
+ // thing that overflows the document will also contribute to the scrollable.
2259
+ // This is unlike overflow: scroll which clips those.
2260
+ // Therefore, we use the scrollable size for this rect instead.
2261
+ return [
2262
+ {
2263
+ x: 0,
2264
+ y: 0,
2265
+ width: instance.scrollWidth,
2266
+ height: instance.scrollHeight,
2267
+ },
2268
+ ];
2269
+ }
2270
+ const result: Array<Rect> = [];
2271
const win = doc && doc.defaultView;
2272
const scrollX = win ? win.scrollX : 0;
2273
const scrollY = win ? win.scrollY : 0;