[grid] Dragging with scrollbar shifts table body downwards

[Peppe]

Description

When scrolling by dragging the scrollbar on a long grid, the grid becomes more and more empty as the area where the rows are rendered is moved downwards at all time. The rows are exactly where they need to be but the rows that should be rendered is wrong. The visual bug is fixed instantly by using wheel scroll on the grid.

Screenshot of the problem

Gif for producing the issue

It works differently in different browsers. In Chrome it is easiest to see it to slowly drag the scrollbar from top to bottom, and the top of the body wont be rendererd. In Firefox, you get it visible by first going to the bottom and from the slowly scrolling upwards. Also then the top of the grid is not rendered, so it is inverted between the browsers.

Expected outcome

All the rows in the body area would be rendered.

Steps to reproduce

Lit element

import { LitElement, html } from 'lit-element'; 
import "@vaadin/vaadin-grid"

class GridView extends LitElement { 

  constructor() {
    super();
    var element = this;
    customElements.whenDefined('vaadin-grid').then(function() {
      const grid = element.shadowRoot.getElementById('mygrid');
      grid.size = 120000;
      grid.dataProvider = function(params, callback) {
        console.log(`Fetch: ${params.page * params.pageSize}, Limit: ${params.pageSize}`);
        const response = Array.from({length: params.pageSize}, (v, k) => {return {value: params.page * params.pageSize + k}}); 
        setTimeout(() => callback(response), 500);
      };
    });
  }
  render() {
    return html` 
      <vaadin-grid id="mygrid">
        <vaadin-grid-column path="value"></vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

customElements.define('grid-view', GridView);

Browsers Affected

• Chrome
• Firefox
• ? Safari
• ? Edge
• ? IE 11
• ? iOS Safari
• ? Android Chrome

[jcgueriaud1]

The problem is related to the virtual items set to 100.000 in vaadin-grid-scroller
const maxVirtualItems = this._edge || this._ie ? 30000 : 100000;

If you changed the default value to 130000 then it's working.

[tomivirkki]

This is a bug in <iron-list> which is used as the virtual scrolling engine in Grid. The bug is reproducible with:

<iron-list style="height: 300px">
  <template>
    <div>[[item.name]]</div>
  </template>
</iron-list>

<script>
  const list = document.querySelector("iron-list");

  list.items = Array.from({ length: 100000 }, (_, i) => {
    return { name: "Item " + i };
  });
</script>

iron-list-scroll-bug.mp4