Android Chrome omnibox and tap position issues with App-Drawer

[TimvdLippe]

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

• [ X] Chrome Android
• [X ] Edge Android
• [Works well ] Firefox Android
• [NOT TESTED] Safari 11
• [NOT TESTED] Safari 10
• [NOT TESTED] IE 11

Versions

• Polymer: v2.6.0
• webcomponents: v1.1.0

Copied from original issue: Polymer/polymer#5265

[keanulee]

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]

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]

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]

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]

There are should be a workaround...

[keanulee]

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