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('