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?

Comienza con la reproducción vinculada de StackBlitz y reproduce la posición del overlay usando el viewport personalizado proporcionado en Chrome o Safari en condiciones móviles. Rastrea el comportamiento flexible de posicionamiento del overlay conectado que se usa después de hacer clic en el input; se considera terminado cuando el overlay aparece debajo del input o cerca de este, en lugar de en la parte inferior de la pantalla.

Escrito por el modelo de indexación a partir del texto del issue.