Scrolling stops on renderer elements (OS X Chrome and Safari) about vaadin-grid

[tepi]

This is a bug in WebKit/Blink. See https://code.google.com/p/chromium/issues/detail?id=312427 for details.

Unfortunately there's no known work-around now (except pointer-events:none).

[jouni]

Since this affects renderers, the workaround is to re-use the renderer elements instead of always clearing the cell element in the renderer function. So something like this:

grid.columns[0].renderer = function(cell) {
  var div = cell.element.firstChild;
  if(!div) {
    div = document.createElement("div");
    cell.element.appendChild(div);
  }
  // Update the rendered elements content
  // If there are child elements inside the 'div', those need to be re-used as well
  div.innerHTML = ...;
}

[jouni]

Now that we have an extra class name (.scrolling) on the .vaadin-grid-body element during scroll, we could use that to add pointer-events: none; to all renderer elements.

For example:

.vaadin-grid-scrolling td * {
  pointer-events: none !important;
}

The extra .scrolling class should be prefixed also (use the primary style name of the GWT widget).

Scrolling is also affected by row detail elements, which are "display: none" initially when they come visible in the grid viewport, but I feel like that should be handled separately.

[jouni]

This issue seems to have been fixed in Chrome/Blink already, so you probably only need to test Safari and iOS.