Fix crash with large grid and browser zoom (#1052)

* Fix crash with large grid and browser zoom

* Fix

* Simplify

* Update comment

* Update packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx

Co-authored-by: Copilot <[email protected]>

* Improvements

* Apply comments

* Update comment

---------

Co-authored-by: Copilot <[email protected]>

Author: lukasmasuch

packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx

@@ -70,6 +70,17 @@ const ScrollRegionStyle = styled.div<{ isSafari: boolean }>`
     }
 `;
 
+// Browser's maximum div height limit. Varies a bit by browsers.
+const BROWSER_MAX_DIV_HEIGHT = 33_554_400;
+// Maximum height of a single padder segment to avoid browser performance issues.
+// Padders are invisible div elements that create the scrollable area in the DOM.
+// They trick the browser into showing a scrollbar for the full virtual content height
+// without actually rendering millions of rows. We create multiple smaller padders
+// (max 5M pixels each) instead of one large padder to avoid browser performance issues.
+// The actual grid content is absolutely positioned and rendered on top of these padders
+// based on the current scroll position.
+const MAX_PADDER_SEGMENT_HEIGHT = 5_000_000;
+
 type ScrollLock = [undefined, number] | [number, undefined] | undefined;
 
 function useTouchUpDelayed(delay: number): boolean {
@@ -108,6 +119,17 @@ function useTouchUpDelayed(delay: number): boolean {
     return hasTouches;
 }
 
+/**
+ * InfiniteScroller provides virtual scrolling capabilities for the data grid.
+ * It handles the mapping between DOM scroll positions and virtual scroll positions
+ * when the content height exceeds browser limitations.
+ *
+ * Browser Limitations:
+ * - Most browsers limit div heights to ~33.5 million pixels
+ * - With large datasets (e.g., 100M rows × 31px = 3.1B pixels), we exceed this limit
+ * - This component uses an offset-based approach to map the limited DOM scroll range
+ *   to the full virtual scroll range
+ */
 export const InfiniteScroller: React.FC<Props> = p => {
     const {
         children,
@@ -131,11 +153,26 @@ export const InfiniteScroller: React.FC<Props> = p => {
     const rightElementSticky = rightElementProps?.sticky ?? false;
     const rightElementFill = rightElementProps?.fill ?? false;
 
-    const offsetY = React.useRef(0);
+    // Track the virtual scroll position directly for smooth scrolling
+    const virtualScrollY = React.useRef(0);
     const lastScrollY = React.useRef(0);
     const scroller = React.useRef<HTMLDivElement | null>(null);
 
     const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio;
+    const lastDpr = React.useRef(dpr);
+
+    // Reset scroll tracking when device pixel ratio changes (e.g., browser zoom)
+    React.useEffect(() => {
+        if (lastDpr.current !== dpr) {
+            virtualScrollY.current = 0;
+            lastScrollY.current = 0;
+            lastDpr.current = dpr;
+            const el = scroller.current;
+            if (el !== null) {
+                onScrollRef.current(el.scrollLeft, el.scrollTop);
+            }
+        }
+    }, [dpr]);
 
     const lastScrollPosition = React.useRef({
         scrollLeft: 0,
@@ -202,16 +239,35 @@ export const InfiniteScroller: React.FC<Props> = p => {
             const scrollableHeight = el.scrollHeight - cHeight;
             lastScrollY.current = newY;
 
-            if (
-                scrollableHeight > 0 &&
-                (Math.abs(delta) > 2000 || newY === 0 || newY === scrollableHeight) &&
-                scrollHeight > el.scrollHeight + 5
-            ) {
-                const prog = newY / scrollableHeight;
-                const recomputed = (scrollHeight - cHeight) * prog;
-                offsetY.current = recomputed - newY;
+            // Calculate the virtual Y position
+            let virtualY: number;
+
+            // When content height exceeds browser limits, use hybrid approach
+            if (scrollableHeight > 0 && scrollHeight > el.scrollHeight + 5) {
+                // For large jumps (scrollbar interaction) or edge positions,
+                // recalculate position based on percentage
+                if (Math.abs(delta) > 2000 || newY === 0 || newY === scrollableHeight) {
+                    const scrollProgress = Math.max(0, Math.min(1, newY / scrollableHeight));
+                    const virtualScrollableHeight = scrollHeight - cHeight;
+                    virtualY = scrollProgress * virtualScrollableHeight;
+                    // Update our tracked position for subsequent smooth scrolling
+                    virtualScrollY.current = virtualY;
+                } else {
+                    // For smooth scrolling, apply the delta directly to virtual position
+                    // This preserves 1:1 pixel movement for smooth scrolling
+                    virtualScrollY.current -= delta;
+                    virtualY = virtualScrollY.current;
+                }
+            } else {
+                // Direct mapping when within browser limits
+                virtualY = newY;
+                virtualScrollY.current = virtualY;
             }
 
+            // Ensure virtual Y is within valid bounds
+            virtualY = Math.max(0, Math.min(virtualY, scrollHeight - cHeight));
+            virtualScrollY.current = virtualY; // Keep tracked position in bounds too
+
             if (lock !== undefined) {
                 window.clearTimeout(idleTimer.current);
                 setIsIdle(false);
@@ -220,7 +276,7 @@ export const InfiniteScroller: React.FC<Props> = p => {
 
             update({
                 x: scrollLeft,
-                y: newY + offsetY.current,
+                y: virtualY,
                 width: cWidth - paddingRight,
                 height: cHeight - paddingBottom,
                 paddingRight: rightWrapRef.current?.clientWidth ?? 0,
@@ -256,9 +312,13 @@ export const InfiniteScroller: React.FC<Props> = p => {
 
     let key = 0;
     let h = 0;
+
+    // Ensure we don't create padders that exceed browser limits
+    const effectiveScrollHeight = Math.min(scrollHeight, BROWSER_MAX_DIV_HEIGHT);
+
     padders.push(<div key={key++} style={{ width: scrollWidth, height: 0 }} />);
-    while (h < scrollHeight) {
-        const toAdd = Math.min(5_000_000, scrollHeight - h);
+    while (h < effectiveScrollHeight) {
+        const toAdd = Math.min(MAX_PADDER_SEGMENT_HEIGHT, effectiveScrollHeight - h);
         padders.push(<div key={key++} style={{ width: 0, height: toAdd }} />);
         h += toAdd;
     }
@@ -304,7 +364,7 @@ export const InfiniteScroller: React.FC<Props> = p => {
                                         marginBottom: -40,
                                         marginRight: paddingRight,
                                         flexGrow: rightElementFill ? 1 : undefined,
-                                        right: rightElementSticky ? paddingRight ?? 0 : undefined,
+                                        right: rightElementSticky ? (paddingRight ?? 0) : undefined,
                                         pointerEvents: "auto",
                                     }}>
                                     {rightElement}

packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx

@@ -194,6 +194,11 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
             }
         }
 
+        // Ensure cellY and cellBottom never exceed the actual row count
+        // This is a safeguard to prevent unexpected out-of-bounds access with large datasets
+        cellY = Math.max(0, Math.min(cellY, rows - 1));
+        cellBottom = Math.max(cellY, Math.min(cellBottom, rows));
+
         const rect: Rectangle = {
             x: cellX,
             y: cellY,