Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Menu's popover position after zoom is the same as in case no zoom was performed.

Current Behavior

The position of popover is awkward on iOS devices.

Steps to Reproduce (for bugs)

Issue could be reproduced on material-ui official website, on IconMenu component subpage:

http://www.material-ui.com/#/components/icon-menu

Seems to be reproducible for material-ui v1 as well:

https://material-ui.com/demos/menus/#max-height-menus

Open page on iOS device.

Click on IconMenu, popover position should be good.

Zoom page, click on IconMenu again, the popover position will be awkward (as on the screen attached).

If Popover position is normal, zoom page more or less and repeat step 3.

Attaching screenshots for conveniece:

Context

We're going to implement 508 compliance in future and there is a requirement saying page should remain usable after 6x or even 8x zoom.

Your Environment

Issue is related to iOS devices only, works good on Android.

Tested on iPhone 8 and iPad, on both Chrome and Safari.

Tech
Version

browser
Chrome, Safari

OS
iOS

Issue 2:
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:

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

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

Click the "Open Popover" button

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.

Tech
Version

Material-UI
v4.4.3 (latest)

React
v16.8.0+ (latest)

Browser
Google Chrome (mobile) 77.0.3865.92

Device
OnePlus 6 (ONEPLUS A6003), but happens on all of the Android and iOS devices we had a chance to test