Can't scroll grid on Safari (iOS)

[roastedcpu]

Vaadin Framework version: 8.14.0 Browser: Safari for iOS 14.7

Can select a row but can't scroll past a Grid on touch devices.

Minimal reproducible example:

public class MyUI extends UI {
    static Long cId = 0L;

    class SamplePerson {
        Long id;
        String name;
        String occupation;

        public SamplePerson(String name, String occupation) {
            this.id = cId++;
            this.name = name;
            this.occupation = occupation;
        }

        public Long getId() { return id; }
        public String getName() { return name; }
        public void setName(String s) { name = s; }
        public String getOccupation() { return occupation; }
        public void setOccupation(String occ) { occupation = occ; }
    }

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        List<SamplePerson> people1 = new ArrayList<>();
        people1.add(new SamplePerson("john", "mechanic"));
        people1.add(new SamplePerson("paul", "lawyer"));
        people1.add(new SamplePerson("clara", "bartender"));
        people1.add(new SamplePerson("julie", "sales"));
        people1.add(new SamplePerson("marie", "architect"));
        people1.add(new SamplePerson("josh", "mechanic"));
        people1.add(new SamplePerson("joey", "mechanic"));
        people1.add(new SamplePerson("anna", "driver"));
        people1.add(new SamplePerson("joanna", "sales"));
        people1.add(new SamplePerson("jack", "maintenance"));
        people1.add(new SamplePerson("joey", "it"));
        people1.add(new SamplePerson("michael", "it"));
        people1.add(new SamplePerson("francis", "it"));
        people1.add(new SamplePerson("john", "mechanic"));
        people1.add(new SamplePerson("paul", "lawyer"));
        people1.add(new SamplePerson("clara", "bartender"));
        people1.add(new SamplePerson("julie", "sales"));
        people1.add(new SamplePerson("marie", "architect"));
        people1.add(new SamplePerson("josh", "mechanic"));
        people1.add(new SamplePerson("joey", "mechanic"));
        people1.add(new SamplePerson("anna", "driver"));
        people1.add(new SamplePerson("joanna", "sales"));
        people1.add(new SamplePerson("jack", "maintenance"));
        people1.add(new SamplePerson("joey", "it"));
        people1.add(new SamplePerson("michael", "it"));
        people1.add(new SamplePerson("francis", "it"));
        people1.add(new SamplePerson("john", "mechanic"));
        people1.add(new SamplePerson("paul", "lawyer"));
        people1.add(new SamplePerson("clara", "bartender"));
        people1.add(new SamplePerson("julie", "sales"));
        people1.add(new SamplePerson("marie", "architect"));
        people1.add(new SamplePerson("josh", "mechanic"));
        people1.add(new SamplePerson("joey", "mechanic"));
        people1.add(new SamplePerson("anna", "driver"));
        people1.add(new SamplePerson("joanna", "sales"));
        people1.add(new SamplePerson("jack", "maintenance"));
        people1.add(new SamplePerson("joey", "it"));
        people1.add(new SamplePerson("michael", "it"));
        people1.add(new SamplePerson("francis", "it"));
        people1.add(new SamplePerson("john", "mechanic"));
        people1.add(new SamplePerson("paul", "lawyer"));
        people1.add(new SamplePerson("clara", "bartender"));
        people1.add(new SamplePerson("julie", "sales"));
        people1.add(new SamplePerson("marie", "architect"));
        people1.add(new SamplePerson("josh", "mechanic"));
        people1.add(new SamplePerson("joey", "mechanic"));
        people1.add(new SamplePerson("anna", "driver"));
        people1.add(new SamplePerson("joanna", "sales"));
        people1.add(new SamplePerson("jack", "maintenance"));
        people1.add(new SamplePerson("joey", "it"));
        people1.add(new SamplePerson("michael", "it"));
        people1.add(new SamplePerson("francis", "it"));

        Grid<SamplePerson> grid1 = new Grid<>();
        grid1.addColumn(SamplePerson::getName);
        grid1.addColumn(SamplePerson::getOccupation);
        grid1.setItems(people1);
        grid1.setHeightMode(HeightMode.ROW);
        grid1.setHeightByRows(10);

        List<SamplePerson> people2 = new ArrayList<>();
        people2.add(new SamplePerson("john", "mechanic"));
        people2.add(new SamplePerson("paul", "lawyer"));
        people2.add(new SamplePerson("clara", "bartender"));
        people2.add(new SamplePerson("julie", "sales"));
        people2.add(new SamplePerson("marie", "architect"));
        people2.add(new SamplePerson("josh", "mechanic"));
        people2.add(new SamplePerson("joey", "mechanic"));
        people2.add(new SamplePerson("anna", "driver"));
        people2.add(new SamplePerson("joanna", "sales"));
        people2.add(new SamplePerson("jack", "maintenance"));
        people2.add(new SamplePerson("joey", "it"));
        people2.add(new SamplePerson("michael", "it"));
        people2.add(new SamplePerson("francis", "it"));
        people2.add(new SamplePerson("john", "mechanic"));
        people2.add(new SamplePerson("paul", "lawyer"));
        people2.add(new SamplePerson("clara", "bartender"));
        people2.add(new SamplePerson("julie", "sales"));
        people2.add(new SamplePerson("marie", "architect"));
        people2.add(new SamplePerson("josh", "mechanic"));
        people2.add(new SamplePerson("joey", "mechanic"));
        people2.add(new SamplePerson("anna", "driver"));
        people2.add(new SamplePerson("joanna", "sales"));
        people2.add(new SamplePerson("jack", "maintenance"));
        people2.add(new SamplePerson("joey", "it"));
        people2.add(new SamplePerson("michael", "it"));
        people2.add(new SamplePerson("francis", "it"));
        people2.add(new SamplePerson("john", "mechanic"));
        people2.add(new SamplePerson("paul", "lawyer"));
        people2.add(new SamplePerson("clara", "bartender"));
        people2.add(new SamplePerson("julie", "sales"));
        people2.add(new SamplePerson("marie", "architect"));
        people2.add(new SamplePerson("josh", "mechanic"));
        people2.add(new SamplePerson("joey", "mechanic"));
        people2.add(new SamplePerson("anna", "driver"));
        people2.add(new SamplePerson("joanna", "sales"));
        people2.add(new SamplePerson("jack", "maintenance"));
        people2.add(new SamplePerson("joey", "it"));
        people2.add(new SamplePerson("michael", "it"));
        people2.add(new SamplePerson("francis", "it"));
        people2.add(new SamplePerson("john", "mechanic"));
        people2.add(new SamplePerson("paul", "lawyer"));
        people2.add(new SamplePerson("clara", "bartender"));
        people2.add(new SamplePerson("julie", "sales"));
        people2.add(new SamplePerson("marie", "architect"));
        people2.add(new SamplePerson("josh", "mechanic"));
        people2.add(new SamplePerson("joey", "mechanic"));
        people2.add(new SamplePerson("anna", "driver"));
        people2.add(new SamplePerson("joanna", "sales"));
        people2.add(new SamplePerson("jack", "maintenance"));
        people2.add(new SamplePerson("joey", "it"));
        people2.add(new SamplePerson("michael", "it"));
        people2.add(new SamplePerson("francis", "it"));

        Grid<SamplePerson> grid2 = new Grid<>();
        grid2.addColumn(SamplePerson::getName);
        grid2.addColumn(SamplePerson::getOccupation);
        grid2.setItems(people2);
        grid2.setHeightMode(HeightMode.ROW);
        grid2.setHeightByRows(10);

        VerticalLayout layout = new VerticalLayout(grid1, grid2);
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

Expected behavior: Should be able to scroll till the last 'Francis' on both grids past the last line of the Grids and scroll the container even when touching the Grid(s).

Actual behavior: Can't scroll at allCan only scroll the Grid and not the container (iOS) or can't scroll even the Grid (Android)

Edited: bold texts are new, strikethrough is old

[TatuLund]

We re-tested this with iOS 14.8 version, and the issue did not occur. We are thus assuming that this was a bug in Safari itself which is fixed in the latest version.

[codeeraser]

We can't see the iOS-update does a fix.

Tested with Vaadin 8.14.1:

iPhone 12 / iOS 14.8.1 (Safari) iPhone 8 / iOS 15.0.2 (Safari) Scrolling works inside Grid. When reaching end of inner-scroll, nothing happens -> Container should scroll.

Huawei P20 Pro / Android 10 (Chrome) Scrolling doesn't work at all, even inside Grid. Zooming doesn't work, additionally.

[OlliTietavainenVaadin]

Reportedly: on a Mac with Chrome and Responsive Mode and touch emulation, the same problem is reproduced. When not using the responsive mode, it works as expected. Scrolling with a trackpad in responsive mode works as well. The problem occurs on a Mac only when responsive mode and the touch simulation are used.

[TatuLund]

Fixed in 8,15.0