Workaround for broken inertial scrolling on Mac WebKit/Blink.

1 files changed, 30 insertions, 1 deletions

diff --git a/slick.grid.js b/slick.grid.js
index 398bd2d..539b260 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -177,6 +177,11 @@ if (typeof Slick === "undefined") {
     var counter_rows_rendered = 0;

     var counter_rows_removed = 0;

 

+    // These two variables work around a bug with inertial scrolling in Webkit/Blink on Mac.

+    // See http://crbug.com/312427.

+    var rowNodeFromLastMouseWheelEvent;  // this node must not be deleted while inertial scrolling

+    var zombieRowNodeFromLastMouseWheelEvent;  // node that was hidden instead of getting deleted

+

 

     //////////////////////////////////////////////////////////////////////////////////////////////

     // Initialization

@@ -321,6 +326,12 @@ if (typeof Slick === "undefined") {
             .bind("dragend", handleDragEnd)

             .delegate(".slick-cell", "mouseenter", handleMouseEnter)

             .delegate(".slick-cell", "mouseleave", handleMouseLeave);

+

+        // Work around http://crbug.com/312427.

+        if (navigator.userAgent.toLowerCase().match(/webkit/) &&

+            navigator.userAgent.toLowerCase().match(/macintosh/)) {

+          $canvas.bind("mousewheel", handleMouseWheel);

+        }

       }

     }

 

@@ -1493,7 +1504,14 @@ if (typeof Slick === "undefined") {
       if (!cacheEntry) {

         return;

       }

-      $canvas[0].removeChild(cacheEntry.rowNode);

+

+      if (rowNodeFromLastMouseWheelEvent == cacheEntry.rowNode) {

+        cacheEntry.rowNode.style.display = 'none';

+        zombieRowNodeFromLastMouseWheelEvent = rowNodeFromLastMouseWheelEvent;

+      } else {

+        $canvas[0].removeChild(cacheEntry.rowNode);

+      }

+      

       delete rowsCache[row];

       delete postProcessedRows[row];

       renderedRows--;

@@ -2133,6 +2151,17 @@ if (typeof Slick === "undefined") {
     //////////////////////////////////////////////////////////////////////////////////////////////

     // Interactivity

 

+    function handleMouseWheel(e) {

+      var rowNode = $(e.target).closest(".slick-row")[0];

+      if (rowNode != rowNodeFromLastMouseWheelEvent) {

+        if (zombieRowNodeFromLastMouseWheelEvent && zombieRowNodeFromLastMouseWheelEvent != rowNode) {

+          $canvas[0].removeChild(zombieRowNodeFromLastMouseWheelEvent);

+          zombieRowNodeFromLastMouseWheelEvent = null;

+        }

+        rowNodeFromLastMouseWheelEvent = rowNode;      

+      }

+    }

+

     function handleDragInit(e, dd) {

       var cell = getCellFromEvent(e);

       if (!cell || !cellExists(cell.row, cell.cell)) {