[DataGrid] Round dimensions to avoid subpixel rendering error (mui#15850

)

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -145,10 +145,8 @@ export const useGridVirtualScroller = () => {
       }
 
       const initialRect = node.getBoundingClientRect();
-      let lastSize = {
-        width: initialRect.width,
-        height: initialRect.height,
-      };
+
+      let lastSize = roundDimensions(initialRect);
 
       apiRef.current.publishEvent('resize', lastSize);
 
@@ -162,10 +160,7 @@ export const useGridVirtualScroller = () => {
           return;
         }
 
-        const newSize = {
-          width: entry.contentRect.width,
-          height: entry.contentRect.height,
-        };
+        const newSize = roundDimensions(entry.contentRect);
 
         if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
           return;
@@ -1109,3 +1104,12 @@ function bufferForDirection(
       throw new Error('unreachable');
   }
 }
+
+// Round to avoid issues with subpixel rendering
+// https://github.com/mui/mui-x/issues/15721
+function roundDimensions(dimensions: { width: number; height: number }) {
+  return {
+    width: Math.round(dimensions.width * 10) / 10,
+    height: Math.round(dimensions.height * 10) / 10,
+  };
+}

packages/x-data-grid/src/tests/layout.DataGrid.test.tsx

@@ -1318,4 +1318,24 @@ describe('<DataGrid /> - Layout & warnings', () => {
       </div>,
     );
   });
+
+  // See https://github.com/mui/mui-x/issues/15721
+  it('should not exceed maximum call stack size caused by subpixel rendering', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      // Need layouting
+      this.skip();
+    }
+
+    render(
+      <div style={{ width: 702.37 }}>
+        <DataGrid
+          columns={[
+            { field: '1', flex: 1 },
+            { field: '2', flex: 1 },
+          ]}
+          rows={[]}
+        />
+      </div>,
+    );
+  });
 });