polymer-starter-kit icon indicating copy to clipboard operation
polymer-starter-kit copied to clipboard

Published 20 hours ago • verified publisher icon Polymer

PSK adds extra scrolling on Chrome for Android

Open rediche opened this issue 7 years ago • 0 comments

Description

When browsing a PSK project in Chrome for Android you can scroll further down than the scrollable area in <app-drawer-layout> causing the entire app to shift out of it's fullbleed position.

This is likely caused by the fact that body has min-height: 100vh; which no longer accounts for the current height of the viewport in Chrome for Android, but rather the "largest possible viewport".

Expected outcome

When hitting the bottom of <app-drawer-layout> the entire layout of the page shouldn't scroll any further.

Actual outcome

When hitting the bottom of the page, you can scroll an additional distance. This scrolling happens on the <body> element.

Steps to reproduce

  1. Make a new PSK installation.
  2. Put more content in my-view1.html, such that text will go over the fold.
  3. Open the page in Chrome on Android (not just an emulated phone on dev tools).
  4. Scroll down to the bottom in a few swipes.
  5. Now scroll down even further (this is the body scrolling).

Possible solution

A solution for this problem is to change from min-height: 100vh; to min-height: 100%;. This however seems to cause the address bar to never disappear when scrolling which is also an unwanted result.

Browsers Affected

  • [x] Chrome on Android
  • [ ] Edge
  • [ ] Firefox
  • [ ] IE 11
  • [ ] Safari 8
  • [ ] Safari 9

rediche avatar Aug 16 '17 14:08 rediche