Android chrome: ConnectedOverlay position wrong when browser topbar is hidden

[abdulkareemnalband]

Bug

ConnectedOverly is positioned slightly below than expected location, if preferred position is {originY: 'top',overlayY: 'bottom'} aka on top

What is the expected behavior?

Overlay should be positioned correctly

What is the current behavior?

Overlay positioned slightly below

What are the steps to reproduce?

https://stackblitz.com/edit/cdkoverlayexample

1. scroll to down till click here button is visible (scrolling required to hide browser top bar)
2. tap on button Overlay appears but in wrong place
3. Scroll up till topbar visible, Overlay is positioned correctly

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular : 5.0.3
angular cdk:5.0.0
browser: android chrome 63

[Shane-E]

This also affects iOS Safari in the same manner as scrolling will hide the browser bottomsheet and cause overlay elements to shift

[csbenjamin]

I am also having this problem

[abdulkareemnalband]

@jelbourn @crisbeto any updates on this?

[abdulkareemnalband]

It is still not working with version 8
https://stackblitz.com/edit/components-issue-4maypw

[mmalerba]

This is working fine for me now with Angular 10 and Android 10 (Pixel 3) https://stackblitz.com/edit/cdkoverlayexample-7du5dd

[abdulkareemnalband]

@mmalerba still not fixed
tested with stackblitz from you
Browser: Android chrome 83.0.4103.106
OS: Android 7.0 Moto G4