Scroll bar disapear when app-drawer is showing

[moduval]

When we open the drawer, the scroll bar disappear on the site’s content leading to app-header not resizing and unexpected issue on layout. For example, I have a layout with one item per row but when I open the app-drawer it displays on two rows because the scroll-bar disappear. You can see this problem in the demo2.html file when you are on a mobile size. Here is images of the bug in my app:

When the app drawer is close:

When I open the drawer:

You can see that the app-header have not resized and that the content is now display two card per rows.

[frankiefu]

The scrollbar disappears because the app-drawer is setting overflow: hidden on the body to prevent the content below the backdrop to scroll when the drawer is opened. So the scrollbar disappears is expected and the layout will change because of that, but the app-header should resize to fill the empty gap and that's a bug.

[blasten]

fixed in master

[xelra]

@blasten Can this be reopened? Apparently it unfixed itself.

When I open the drawer in the polymer starter kit from Polymer 2, this issue isn't there. The scrollbar stays and the content behind the drawer does not jump around.

But in the pwa starter kit from Polymer 3, the scrollbar vanishes and the content jumps around.

[keanulee]

The fix to this issue is not the same as Polymer/pwa-starter-kit#98 - specifically, this one and the fix refers to how the header doesn't resize after the scrollbar disappears. The scrollbar disappearing is a side effect of making body.style.overflow = 'hidden' which is necessary to block scrolling when the drawer is opened. #375 is a related issue.

[xelra]

I'm confused. In the polymer starter kit the scrollbar doesn't disappear and neither does the content below the drawer scroll when I turn the mouse-wheel.

Something just doesn't make sense on why this is happening now in the pwa starter kit. If it's the same elements, then how was it fixed in 2.0?

[keanulee]

pwa-starter-kit !== polymer-starter-kit. polymer-starter-kit uses an element scroller (and body.style.overflow = 'hidden' doesn't hide the element scroller's scrollbar) while pwa-starter-kit uses the document scroller.

[xelra]

Thanks, now it makes sense.

So where does this need fixing? In app-layout or in the pwa-starter-kit?

I can't imagine this being ok for anyone designing a web app.

Or is this just a "won't fix" with reference to wait for the mwc-drawer?

[keanulee]

We're not going to fix this in pwa-starter-kit because we're optimizing for the experience on mobile (which uses the document scroller so that the browser's URL toolbar scrolls away and doesn't have visible scrollbars). Even some desktop browsers don't show the scrollbar so this won't matter there. If you need to keep the scrollbar, you'll need to create an element scroller for the content that is the height of the viewport (e.g. height: 100vh; overflow: auto), but note you'll hurt mobile browsers (i.e. the URL toolbar will not scroll away).