From 0d4d943a2f952d7477c16bff98778a6223de6a37 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Thu, 2 Feb 2023 21:04:19 -0500
Subject: [PATCH] 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
---
 slick.grid.js | 46 +++++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/slick.grid.js b/slick.grid.js
index 7a10d2a6..71e759a2 100644
--- 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