bug(CDK Overlay): cdkConnectedOverlay ConnectedPosition not correctly calculated after scrolling on mobile browser

The ConnectedPositions for a cdkConnectedOverlay are not correctly calcullated when browsing and scrolling on a mobile browser. The mobile devices are hiding the address bar when you scroll down. This results in a change of the viewport sizes. If you open a cdkConnected overlay after scrolling it's position is at the wrong location.

#### Reproduction

https://stackblitz.com/edit/components-issue-mbxfr2

Steps to reproduce:
1. Create a component with cdkConnectedOverlay
2. Add it to your application
3. Browse to your angular app on a mobile device a
4. Open the overlay -> this should be correct positioned
5. Scroll down (the browser hides the address bar)
6. Overlay position is on wrong location

#### Expected Behavior

The connected overlay should be on the correct position after scrolling on a mobile device

#### Actual Behavior

The position of the overlay is calculated wrong and displayd at the wrong position.

The position of the overlay with the address bar (as expected)

The position of the overlay without the address bar, after scrolling (not as expected)

#### Environment
- Angular: 12
- CDK/Material: 12
- Browser(s): Chrome Android, Safari IOS
- Operating System: IOS, Android

Bắt đầu với bản tái hiện StackBlitz được liên kết và entry point định vị cdkConnectedOverlay của CDK. Tái hiện vấn đề trên Chrome Android hoặc Safari iOS bằng cách mở overlay, cuộn để ẩn thanh địa chỉ, rồi mở lại overlay. Hoàn tất khi connected overlay vẫn được định vị chính xác sau khi viewport trên thiết bị di động thay đổi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.