Vaadin-grid: Scroll in grid inside a dialog is not working on iOS

[brp-jimmy]

Description

When I add a grid in a dialog I cannot scroll when I open it on my iPad.

Our real use case is to open a dialog which has a grid to be able to search for and then select a customer.

Tested with iOS version 13.1.1. Both on Safari and Chrome for iPad.
It works when I test in Chrome on my Android phone as well as in Chrome on Windows.

Expected outcome

When there are more items than the grid can show I shall be able to scroll down to see the remaining ones.

Actual outcome

Not able to scroll down

Example code

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.data.provider.DataProvider;
import com.vaadin.flow.router.Route;

import java.util.ArrayList;
import java.util.List;

@Route(value = "custom", layout = DefaultAppLayout.class)
public class CustomView extends Div {

    protected CustomView() {
        Button button = new Button();
        button.setText("Open grid dialog");
        button.addClickListener(this::openDialog);
        add(button);
    }

    private void openDialog(ClickEvent<Button> buttonClickEvent) {
        Dialog dialog = new Dialog();
        Grid<String> gridDialog = new Grid<>();
        List<String> strings = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            strings.add("Some text to display");
        }

        gridDialog.addColumn(String::toString);
        gridDialog.setDataProvider(DataProvider.ofCollection(strings));

        dialog.add(gridDialog);
        dialog.open();
    }
}

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] IE 11
• [x] iOS Safari
• [ ] Android Chrome

[tomivirkki]

This is happening due to https://github.com/vaadin/vaadin-grid/blob/master/src/vaadin-grid-styles.html#L325 The #outerscroller element gets hidden behind the overlay due to the negative Z-index. We'll need to make sure the element's z-index is always larger than that of the overlay it's wrapped in.

Workaround: Create a separate stacking context for grid:

gridDialog.getElement().getStyle().set("transform", "translateZ(0)");

EDIT: One possible fix would be to create a separate stacking context for the overlays

[brp-jimmy]

Thanks for the workaround. 👍

[felipebolanost]

Any news on this bug?

I tried the workaround but it didn't work for me. Maybe I'm doing it wrong. Can you please give me further details on how to do a temporary workaround?

Hope this bug is fixed soon.

Thanks for your help

[mvniemi]

Wanted to note that I'm having this issue and needing to use the workaround when using grids inside or other components (vaadin-split-layout, iron-pages), not just inside of dialogs

[weiliang2]

Hope to have to solved soon. This is affecting most of my grid that are placed into a horizontal layout with other forms.

[tomivirkki]

Fixed by https://github.com/vaadin/vaadin-grid/pull/1791