Flexible connected overlay has incorrect position on Mobile

#### What is the expected behavior?
The flexible connected overlay should appear near the origin on Mobile browsers with custom viewport:
``

#### What is the current behavior?
The overlay appears on the bottom of the screen
Reproducible at least on:
- Chrome for Android
- Chrome for Windows (with device toolbar enabled, Device type = Mobile)
- Safari on IPhone

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-9bewwa-k9rrhg

1. Open example in new window
2. Open dev tools
3. Toggle device toolbar
4. Select some mobile phone in portrait mode
5. Click on input

Actual result: Overlay appears on the bottom of the screen
Expected result: Overlay appears under the input

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: latest
Material: latest
OS: Windows, Android, IOS
Browsers: Chrome, Safari

#### Is there anything else we should know?

Beginne mit der verlinkten StackBlitz-Reproduktion und reproduziere die Position des overlay mit dem bereitgestellten benutzerdefinierten viewport unter mobilen Bedingungen in Chrome oder Safari. Verfolge das flexible Positionierungsverhalten des verbundenen overlay, das nach dem Klicken auf das input verwendet wird; abgeschlossen ist es, wenn das overlay unterhalb des input oder in dessen Nähe statt am unteren Bildschirmrand erscheint.

Vom Indexierungsmodell aus dem Issue-Text verfasst.