[Popover] On mobile Chrome while zoomed, opening popover causes page to jump

• The issue is present in the latest release.
• * I have searched the issues of this repository and believe that this is not a duplicate.

* There's an open issue related to IconMenu for iOS devices, but this is not the same component, and also no longer exclusive to iOS devices but happens on Android also.

Current Behavior 😯

On mobile Chrome, while the page is slightly zoomed, opening the popover will cause it to open but will also cause the page to scroll itself up into a position in which the popover can no longer be visible.
Also, while being in that position, the scrolling/zooming of the page is disabled and the only interaction allowed is to tap the invisible backdrop in order for the popover to close.

The issue does not happen on the root component (Modal) which leads us to believe that this may be an issue with the calculation of the anchor position, but we're not 100% sure.

We have also tested all the combinations of disableAutoFocus, disableEnforceFocus and disableRestoreFocus for the root modal props, but to no effect.

The issue only happens on the actual mobile device, using the desktop Chrome Devtools to emulate the issue was unsuccessful.

Expected Behavior 🤔

Expected the popover to open and for the page to stay in the same scroll position regardless of the current zoom level in order for the popover content to be visible, also expected to be able to at least drag the viewport in order to reach the relevant popover after the jump (solved it by overriding the touch-action: none css for the backdrop, but was confused by its default value)

Steps to Reproduce 🕹

The issue can be reproduced on the material-ui popover component demo website: https://material-ui.com/components/popover/

Including video of the interaction described in the steps below: https://drive.google.com/file/d/12MLICM7nngPuthRaVhXurLLkKq1212PK/view

Steps:

1. Browse on mobile Chrome to https://material-ui.com/components/popover/
   

2. Detect the "Simple Popover" demo section, slightly zoom in (device pinch) so that the "Open Popover" button is still visible.
   

3. Click the "Open Popover" button
   

4. At this point, the popover is open but the page already scrolled itself up

Context 🔦

We've been using material-ui for our project for quite some time and are very pleased by it. Due to the nature of our project, mobile support has been minimal but users that wished to browse through mobile generally had no difficulties to pan/zoom in order to move around the page.
We made heavy usage of modals, popovers and dialogs, but the current issue prevents users from completing simple actions.
We believe that the issue is quite new and that the new Chrome mobile version might also have something to do with it.

Your Environment 🌎

Our local environment is a bit outdated (React v16.7 & material-ui v3.7.0) but the issue occurs even on the demo website, which leads us to believe that the issue is consistent even on the latest version.

Start by reproducing the issue on the material-ui Popover demo using a physical Android or iOS device with mobile Chrome zoomed, since desktop emulation did not reproduce it. Investigate the Popover behavior around anchor-position calculation and the backdrop interaction; done means opening the popover preserves the page position, keeps its content visible, and still permits the viewport to be moved.