fix: horizontal scrolling can cause screen flickering (#722)

- add a delay of a cycle to avoid screen flickering that we observed to be worst in Chrome and Salesforce. This small delay of 1 cycle is enough to remove the flickering - the process is that when the grid is being scrolled horizontally, it has to change the scroll position of every other div container that might exist (preheader, headerrow, footer) and if we change the position at the same time as the grid scroll it can cause flickering
6pac · Feb 3, 2023 · 0d4d943 · 0d4d943
1 parent 15764ae
commit 0d4d943
Showing 1 changed file with 25 additions and 21 deletions.
diff --git a/slick.grid.js b/slick.grid.js
@@ -4410,30 +4410,34 @@ if (typeof Slick === "undefined") {
       if (hScrollDist) {
         prevScrollLeft = scrollLeft;
 
-        $viewportScrollContainerX[0].scrollLeft = scrollLeft;
-        $headerScrollContainer[0].scrollLeft = scrollLeft;
-        $topPanelScroller[0].scrollLeft = scrollLeft;
-        $headerRowScrollContainer[0].scrollLeft = scrollLeft;
-        if (options.createFooterRow) {
-          $footerRowScrollContainer[0].scrollLeft = scrollLeft;
-        }
-        if (options.createPreHeaderPanel) {
-          if (hasFrozenColumns()) {
-            $preHeaderPanelScrollerR[0].scrollLeft = scrollLeft;
-          } else {
-            $preHeaderPanelScroller[0].scrollLeft = scrollLeft;
+        // adjust scroll position of all div containers when scrolling the grid
+        // add a delay to avoid screen flickering
+        setTimeout(function () {
+          $viewportScrollContainerX[0].scrollLeft = scrollLeft;
+          $headerScrollContainer[0].scrollLeft = scrollLeft;
+          $topPanelScroller[0].scrollLeft = scrollLeft;
+          $headerRowScrollContainer[0].scrollLeft = scrollLeft;
+          if (options.createFooterRow) {
+            $footerRowScrollContainer[0].scrollLeft = scrollLeft;
           }
-        }
-
-        if (hasFrozenColumns()) {
-          if (hasFrozenRows) {
-            $viewportTopR[0].scrollLeft = scrollLeft;
+          if (options.createPreHeaderPanel) {
+            if (hasFrozenColumns()) {
+              $preHeaderPanelScrollerR[0].scrollLeft = scrollLeft;
+            } else {
+              $preHeaderPanelScroller[0].scrollLeft = scrollLeft;
+            }
           }
-        } else {
-          if (hasFrozenRows) {
-            $viewportTopL[0].scrollLeft = scrollLeft;
+
+          if (hasFrozenColumns()) {
+            if (hasFrozenRows) {
+              $viewportTopR[0].scrollLeft = scrollLeft;
+            }
+          } else {
+            if (hasFrozenRows) {
+              $viewportTopL[0].scrollLeft = scrollLeft;
+            }
           }
-        }
+        }, 0);
       }
 
       // autoheight suppresses vertical scrolling, but editors can create a div larger than