From 764f749c49de13180481fd966aab963ee8d2b820 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Fri, 13 Dec 2024 09:45:34 +0000
Subject: [PATCH] [DataGrid] Round dimensions to avoid subpixel rendering error
 (#15850)

---
 .../virtualization/useGridVirtualScroller.tsx | 20 +++++++++++--------
 .../src/tests/layout.DataGrid.test.tsx        | 20 +++++++++++++++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index 1502dfbf4ec61..948450691a821 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/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,
+  };
+}
diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
index cd4d6d324bb53..c07c07fd3791f 100644
--- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
+++ b/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>,
+    );
+  });
 });