Scrolling to bottom causes grid to display an empty line when scrolling upwards when grid has a horizontal scrollbar

[samo4b]

I used the demo to demonstrate the problem we have. This problem exists within this extension as well as on the current vaadin 8.8.5 release which we use.

I can reproduce this problem with the following functions: scrollExtension.setScrollPosition(0, newPos) or scrollTo(int row, ScrollDestination destination)

Now to the problem itself: The problem only occurs with the following setup:

• The scrollbar must have a horizontal scrollbar on the bottom
• The scroll position which should be restored is one of the last rows.

I tried to show this by scrolling to the last position in the demo:

Now when i scroll upward i get an empty line showing up.

So i tried to debug this with the developer tools and i found out that the empty lines translate3d(0px, 608px, 0px); has a wrong calculated y position. When fixing the wrong y position in the developer tools the actual items shows up correctly.

This problem does occur on the Internet Explorer (after 11.X). Here is my Internet Explorer Version i tested this with.

I know we do have an other developer using 11.0.X and there the problem does not occur. This also was tested with Version 11.2.X and there the problem is also present.

Also i have tested this with Chrome and the problem does occur sometimes.

I did try out many things but i couldn't find any workaround to fix the problem.

[TatuLund]

Couple of comments

1. I was not able to reproduce the issue

as well as on the current vaadin 8.8.5 release which we use.

2. If the issue happens without add-on, then the problem is most likely in Grid itself. If you can create better example how to reproduce the issue, I recommend to report the problem in github.com/vaadin/framework/issues

[samo4b]

I modified your DemoUI class can you try to reproduce it with this?

This is how i can reproduce it with the IE every single time.

1. Scroll to the bottom and copy the Position number of last row
2. Scroll to the top enter the Position of the last row index and press the Goto button
3. Scroll a few rows upwards and there should be the empty line

Yes i also assume that the framework is the better place to report this issue but it is very easy to use your given example to reproduce it.

@Push
@Theme("demo")
@Title("GridScrollExtension Demo")
@SuppressWarnings("serial")
public class DemoUI extends UI {

    public class GridLayout1 extends VerticalLayout {
        private Grid<SimplePojo> grid1 = new Grid<>();
        private GridScrollExtension<SimplePojo> ext1 = new GridScrollExtension<>(grid1);

        GridLayout1() {
            Random random = new Random(4837291937l);
            List<SimplePojo> data = new ArrayList<>();
            for (int i = 0; i < 1000; i++) {
                data.add(new SimplePojo(i, "Bean", true, new Date(),
                        BigDecimal.valueOf(random.nextDouble() * 100), Double
                                .valueOf(random.nextInt(5))));
            }
            grid1.addColumn(SimplePojo::getDescription).setCaption("Description").setWidth(500d);
            grid1.addColumn(SimplePojo::getStars).setCaption("Rating").setWidth(500d).setHidable(true);
            grid1.addColumn(SimplePojo::isTruth).setCaption("Boolean").setWidth(500d);
            grid1.addColumn(SimplePojo::getDate).setCaption("A date").setWidth(500d);
            grid1.addColumn(SimplePojo::getNumber).setCaption("A Long number").setWidth(500d);
            grid1.setItems(data);
            grid1.setHeightByRows(15d);
            grid1.setWidth(100f, Unit.PERCENTAGE);
            VerticalLayout vLayout = new VerticalLayout();
            vLayout.addComponent(grid1);
            vLayout.setSizeFull();
            HorizontalLayout hLayout = new HorizontalLayout();
            TextField field = new TextField("Position");
            field.addBlurListener(event -> {
                System.out.println("Blur fired!");
            });
            field.addFocusListener(event -> {
                System.out.println("Focus fired!");
            });
            Button saveButton = new Button("Save", event -> {
                Integer yPos = ext1.getLastYPosition();
                field.setValue(yPos.toString());
            });
            Button gotoButton = new Button("Goto", event -> {
                Integer newPos = Integer.parseInt(field.getValue());                
                ext1.setScrollPosition(0, newPos);
            });
            Label widthsLabel = new Label();
            Label sizeLabel = new Label("Width: "+ext1.getWidth()+", Height: "+ext1.getHeight());
            Button columnButton = new Button("Columns", event -> {
                String widths = "Column widths:";
                for (Column<SimplePojo, ?> col : grid1.getColumns()) {
                    widths = widths + " "+ ext1.getColumnWidth(col);
                }
                widthsLabel.setValue(widths);
                sizeLabel.setValue("Width: "+ext1.getWidth()+", Height: "+ext1.getHeight());
            });

            Button resetButton = new Button("Reset", event -> {
                for (Column<SimplePojo, ?> col : grid1.getColumns()) col.setWidth(200.0d);
                ext1.adjustGridWidth();
            });

            ext1.addGridRenderedListener(event -> {
                String widths = "Column widths:";
                for (Column<SimplePojo, ?> col : grid1.getColumns()) {
                    widths = widths + " "+ ext1.getColumnWidth(col);
                }
                widthsLabel.setValue(widths);               
                sizeLabel.setValue("Width: "+ext1.getWidth()+", Height: "+ext1.getHeight());
            });

            ext1.addGridResizedListener(event -> {
                sizeLabel.setValue("Width: "+ext1.getWidth()+", Height: "+ext1.getHeight());                
            });

            ext1.addGridScrolledListener(event -> {
                Integer yPos = ext1.getLastYPosition();
                field.setValue(yPos.toString());
            });

            ext1.addGridColumnsResizedListener(event -> {
                String widths = "Column widths:";
                for (Column<SimplePojo, ?> col : grid1.getColumns()) {
                    widths = widths + " "+ ext1.getColumnWidth(col);
                }
                widthsLabel.setValue(widths);               
            });

            hLayout.addComponents(field,gotoButton,saveButton,columnButton,resetButton,widthsLabel,sizeLabel);
            hLayout.setComponentAlignment(gotoButton, Alignment.BOTTOM_LEFT);
            hLayout.setComponentAlignment(saveButton, Alignment.BOTTOM_LEFT);
            vLayout.addComponent(hLayout);
            addComponent(vLayout);
            setMargin(true);
        }
    }

    @Override
    protected void init(VaadinRequest request) {

        // Show it in the middle of the screen
        setContent(new GridLayout1());        
    }

  @WebServlet(value = "/*", asyncSupported = true)
  @VaadinServletConfiguration(productionMode = false, ui = DemoUI.class)
  public static class Servlet extends VaadinServlet {
  }
}

[samo4b]

This probably fixes the issue: https://github.com/vaadin/framework/issues/11892