Vertical scrollbar is disappearing when open a combobox inside a dialog in Safari

[jcgueriaud1]

In Vaadin 14.2.3, only on Safari.

When I'm opening the overlay of the combobox, the dialog inner scrollbar is disappearing.

I can reproduce it in Safari. Chrome seems ok.

Here the code to reproduce it:

@Route("dialog")
@CssImport("./styles/shared-styles.css")
@CssImport(value="./styles/dialog-overlay.css", themeFor="vaadin-dialog-overlay")
public class DialogView extends VerticalLayout {

    private String text = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium reprehenderit distinctio pariatur obcaecati!"
            + "Quidem, voluptatum. Inventore aut eum quis repellat labore ratione, maxime odit saepe debitis assumenda harum magni unde?"
            + " Lorem, ipsum dolor sit amet consectetur adipisicing elit. In deleniti repudiandae magni ex alias pariatur, molestiae dolor "
            + "expedita odit iste deserunt est suscipit aut omnis inventore, libero dolore. Asperiores, assumenda. Lorem ipsum dolor sit amet"
            + " consectetur adipisicing elit. Assumenda id laudantium quod deleniti neque! Expedita consequuntur necessitatibus earum tenetur "
            + "odio provident deleniti sed praesentium illum facilis id, corporis, illo ab.";

    public DialogView() {

        Button button = new Button("Click me", e -> {
            Dialog dialog = new Dialog();
            VerticalLayout verticalLayout = new VerticalLayout();
            verticalLayout.setSizeFull();
            verticalLayout.setPadding(false);
            Div header = new Div();
            header.setText("Header");

            Div footer = new Div();
            footer.setText("footer");
            Div content = new Div();
            Div textContent = new Div();
            ComboBox<String> objectComboBox = new ComboBox<>();
            objectComboBox.setItems("item 1","item 2", "item 3");
            content.add(objectComboBox);
            content.add(textContent);
            textContent.setText(text+text+text+text+text+text);
            content.addClassName("content-wrapper");
            verticalLayout.add(header, content, footer);

            dialog.add(verticalLayout);
            dialog.open();
        });
        add(button);
    }

}

dialog-overlay.css

div[part="overlay"] {
    display: flex;
}

shared-styles.css

vaadin-dialog-overlay flow-component-renderer > div {
  height: 100%;
}
.content-wrapper {
  overflow: auto;
}

vaadin_14_1_8_safari after opening the combobox

vaadin_14_2_3_safari before opening the combobox

vaadin_14_2_3_safari after opening the combobox

[jcgueriaud1]

By default (before opening the combobox), resizer-container is not full sized.

After opening the combobox:

[part='overlay'][style] .resizer-container {
height: 100%;
width: 100%;
}

[DiegoCardoso]

Confirmed.

The [part='overlay'][style] .resizer-container style only applies after the combo-box (or another component using overlay) opens, because it sets pointer-events: none to other overlays (at the [part="overlay"] element). And after the combo-box is closed, pointer-events is removed, but the style is still present (it can't be seen on your screenshot, but I could test it with $0.hasAttribute('style)), so the selector still matches. I could restore the scrollbar, by setting overflow: auto to [part="overlay], but I am uncertain about other effects it may cause.

[jcgueriaud1]

Thank you.

Unfortunately, if I set the overflow:auto to [part="overlay], the entire dialog is scrollable. In my case, I want only the content scrollable (not my header/footer).

[DiegoCardoso]

Oh, yeah, that's right. Needs more investigation, then.

[web-padawan]

Now when I looking into this, I think that [part='overlay'][style] is certainly not the correct CSS selector.

We would need an attribute e.g. has-bounds set by _setBounds method to apply styles properly.

[web-padawan]

Created a reduced test case which shows the actual issue: https://codepen.io/web-padawan/pen/MWKZxRP

UPD: another test case, without Shadow DOM: https://codepen.io/web-padawan/pen/mdVvdyN

[web-padawan]

The bug appears to be fixed in Safari 14.0 beta, but present in Safari TP 102:

Safari 14 beta

Safari TP 102

This appears to be a height calculation issue. Not sure when it was fixed.
In the Technology Preview release notes there are some fixes since Safari TP 102 which can be potentially related.

I will try to come up with a workaround.