[DataGrid] Avoid paint step (#531)

mui · Nov 4, 2020 · 05ea7cc · 05ea7cc
1 parent 453e2f1
commit 05ea7cc
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/grid/_modules_/grid/hooks/utils/useScrollFn.ts b/packages/grid/_modules_/grid/hooks/utils/useScrollFn.ts
@@ -30,8 +30,9 @@ export function useScrollFn(
         if (renderingZoneElementRef.current!.style.pointerEvents !== 'none') {
           renderingZoneElementRef.current!.style.pointerEvents = 'none';
         }
-        renderingZoneElementRef.current!.style.transform = `translate(-${v.left}px, -${v.top}px)`;
-        columnHeadersElementRef.current!.style.transform = `translate(-${v.left}px, -0px)`;
+        // Force the creation of a layer, avoid paint when changing the transform value.
+        renderingZoneElementRef.current!.style.transform = `translate3d(-${v.left}px, -${v.top}px, 0)`;
+        columnHeadersElementRef.current!.style.transform = `translate3d(-${v.left}px, 0, 0)`;
         debouncedResetPointerEvents();
         previousValue.current = v;
       }