Flow: Issues with Scrollbar caused by 100vw set on body

[romst]

Hi, I'm currently testing components for Vaadin 12.0.3 and noticed, that scrolling isn't really working good. As soon as the horizontal scrollbar appears, a vertical is added because of the vertical scrollbar.

I'm using a FormLayout, to which I've added some components with addFormItem. I'm testing on Chrome 71.0.3578.98

I've identified the problem to be caused by the body tag, which uses 100vw/vh instead of 100% for width and height. If I fix that in the Chrome Editor, it works perfectly.

[Peppe]

There has been talks about html/body size and wether it should be %/vh/null by default. The truth is that it depends on the case that you are building. I don't see directly why vh doesn't work but % works.

Tickets with relevant discussion that might interest you:
https://github.com/vaadin/flow/issues/2344
https://github.com/vaadin/flow/issues/3749

[romst]

The difference is, that 100vw breaks the flex and 100% doesn't. Depending on the main layout, the html element isn't 100vw, since the vertical scrollbar is outside of the html space. With 100vw on the body, the body is wider (17px) than the html element and therefor creates a horizontal scrollbar because of the vertical scrollbar.

Following code already breaks the layout, if you reduce the browser sice until there's a vertical scrollbar.

@Route("")
@Theme(value = Lumo.class)
public class MainView extends VerticalLayout {
    public MainView() {
        add(new Text("Test"));
    }   
}

[romst]

The issue also can already be seen on the login page of the demo app.
https://bakery-flow.demo.vaadin.com/login

[web-padawan]

Transferred this issue from vaadin-core because this is not a components issue.
There hasn't been any activity for a while, but I believe the actual problem is still there.

And it's actually by design, as described in #3749 and implemented in #3821.

So please decide whether this should be fixed (breaking change), or closed as won't fix.

[pleku]

This is indeed problematic in the case presented above with e.g. VerticalLayout as the main layout, but it is working fine for Bakery, both in login and after login. It is not reproducing when the root layout of the application is AppLayout since that will have

    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    height: 100%;

I'm not sure if we can now easily switch this for 14.x series as it could be sort-of-a breaking change to switch from 100vw to 100%. @jouni any thoughts on what we should do, as in hindsight the default is not perfect? I cannot say if the breaking change is safe to be introduced or not. If it cannot be introduced, then this could be just closed as a _wontfix_.

A workaround for this is currently to set the style with @BodySize(height = "100vh",width = "100%") to the root layout in Java.

[jouni]

My gut says that changing from 100vw to 100% would be considered as a bugfix by nearly all users, and would not break any apps that already work as expected (full size without any scrollbars).

100vw and 100% widths on the body are effectively always the same, unless you have adjusted the width of the html element (and there’s no vertical scrollbar).

This is based on the assumption that no app really wants the behavior where they have both the vertical and horizontal scrollbars when only the vertical one is needed.

We could also leave the width of the body to the default auto value.

[pleku]

Thanks @jouni. So while we would not consider this a breaking change, it might be still good to note about this change in the release notes.