<app-header-layout has-scrolling-region> has additional unwanted "scroll region" on mobile chrome

[Andrew See]

Description

When using on mobile Chrome with a page that is larger than the mobile screen, an additional unwanted "scroll region" appears when scroll all the way to the end of the screen (where the Chrome Address Bar fades away), and scroll back up.

This is a known limitation as reference in PolymerElements/app-layout#533, which I think should not be there "out-of-the-box" for the new user. Not sure if PSK want to change it's <app-header-layout has-scrolling-region> to <app-header-layout fullbleed> in order to remove the known limitation.

Expected outcome

No additional unwanted "scroll region".

Actual outcome

Additional unwanted "scroll region" visible at the bottom.

Live Demo

See: PolymerElements/app-layout#533

Steps to reproduce

See: PolymerElements/app-layout#533

Browsers Affected

• Chrome
• Edge
• Firefox
• IE 11
• Safari 8
• Safari 9

[Steven]

I was having some scroll issues with mobile safari.

app-drawer-layout {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Fixed the issues for me.