search

PolymerElements / app-layout

App layout elements
https://webcomponents.org/element/PolymerElements/app-layout
597 stars 311 forks source link

Android Chrome omnibox and tap position issues with App-Drawer #562

Open TimvdLippe opened 6 years ago

TimvdLippe commented 6 years ago

From @RuslanKim on June 20, 2018 11:3

DEMO site: https://www.teamatical.com/ If you go to home page and scroll down several screens, then use scrollup button then you should see well working button.... BUT if you use app-drawer (burger button or swipe left from right edge) and scroll down again than swipe a bit on page area to show omnibox of the browser ....BOOM then try to use scrollup button, you should see it does not work as expected and sometimes it needs to tap over...but sometimes it requires to tap under the button to make it works. Try tap under the button, so you can see positioning issue... What a hell is that? FF works well because it does not hide omnibox (address bar)... Are there any ideas what is it? How to fix? Acually it repeats on https://shop.polymer-project.org/ too, you can swipe out the drawer and scroll page up to hide omnibox and links on drawer are missing it tap positioning... Is it an issue of the Polymer or Browser?

Browsers Affected

Versions

Copied from original issue: Polymer/polymer#5265

keanulee commented 6 years ago

Suspect this is some sort of style recalc bug with Chrome Android and Shadow DOM. I couldn't reproduce with fixed positioning without Shadow DOM. Need more time to create a working repro.

RuslanKim commented 6 years ago

I've tested Android Chrome with options: window.customElements.forcePolyfill = true; window['ShadyDOM'] = { force: true }; window['ShadyCSS'] = { shimcssproperties: true }; Unfortunately, the bug reproduces anyways... :(

keanulee commented 6 years ago

Yea, I could still reproduce with app-drawer in pwa-starter-kit with Shady DOM/CSS shim (though for some reason only after scrolling/toggling the drawer a few times, not the first time). Can't think of anything specific that app-drawer is doing though - it just relies on CSS position for layout.

RuslanKim commented 6 years ago

What's the strangest thing is that the same bug is in Edge browser (mobile, android at least). But for app-drawer it is a totally bug and it cannot be used it broke all the website :(

RuslanKim commented 6 years ago

There are should be a workaround...

keanulee commented 6 years ago

Filed Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=855694