Grid renderes with gap between rows

[gatanaso]

Description of the bug

In certain cases, when resizing the browser window or view container, the vaadin grid renders with gaps between rows:

Inspecting the DOM reveals that there is a mismatch in the row translate3d property values:

The above grids are created in the following way:

Grid<Person> grid3 = new Grid<>(Person.class);
grid3.setItems(Person.generate());
grid3.setSizeFull();
grid3.setId("grid3");
grid3.getEditor().setEnabled(true);
grid3.getEditor().setBuffered(false);

Expected behavior
The grid renders correctly and there are no gaps between the rows.

Actual behavior
The grid renders with gaps between rows (as can be seen in the attached images)

Steps to reproduce
We were able to reproduce this issue using the vaadin 8 sampler project: https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features

1. Navigate to the grid features page (https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features)
2. Scroll to the bottom of the grid
3. Using the resize grid control (in the bottom right corner), resize the grid vertically up and down a few times
4. Eventually the grid will render with gaps between rows:

Misc

• Vaadin Framework version: 8.9.3
• Browser: Chrome (also possible to reproduce in Firefox)

[gatanaso]

Unfortunately the issue is still reproducible in version 8.10.2 using the same reproducing steps from above (this is from the vaadin sampler running version 8.10.2):

[TatuLund]

I have not been able to reproduce the issue after the fix. I tested the Sampler too and tried out Chrome, Firefox, Edge and IE11 and it worked ok with all of them. I have received info from others too that fix has been effective. So my understanding is that with the fix the likelihood of this problem has decreased considerably. However as you have managed to still reproduce the problem it just tells that it is still possible. I think it can be attributed to specific computer performance, mouse device etc. One could experimentally try to optimize the debounce interval, which is now 50ms (see: https://github.com/vaadin/framework/blob/master/client/src/main/java/com/vaadin/client/widgets/Grid.java#L9282 ) I would assume that with a bit longer period the likelihood of occurrence is smaller. But we do not want to have too big value there, since there will be noticeable delay after resize before Grid adjusts itself. So fundamentally it is about finding optimum between these.