Repository: material-ui
Issue: [Popover] Repositions After Pinch Zoom Safari Mobile
Labels: bug 🐛,component: menu,component: Popover,component: select

<!-- Provide a general summary of the issue in the Title above -->
When selecting an item from a MenuItem, if you try to zoom in it will go out of sight and when you zoom back in, the list will be repositioned away from its original position

<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [ ] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

<!-- Describe what happens instead of the expected behavior. -->
We have MenuItems for selecting from a dropdown inside of TextFields. On safari on mobile devices, if you zoom in on the MenuItems, you will no longer be able to see them until you zoom out. Once zoomed out, they are no longer in place with where they were.

## Expected Behavior 🤔

<!-- Describe what should happen. -->
When selecting an item, you should be able to zoom in on a mobile device to read the text and be able to select an item then zoom out and the MenuItems should be in the same place.

## Steps to Reproduce 🕹

<!--
  Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
  Include code to reproduce, if relevant (which it most likely is).

  You should use the official codesandbox template as a starting point: https://material-ui.com/r/issue-template

  If you have an issue concerning TypeScript please start from this TypeScript playground: https://material-ui.com/r/ts-issue-template

  Issues without some form of live example have a longer response time.
-->

(https://material-ui.com/components/menus/)
This behavior happens on the material-ui site for menus.

Steps:

1. Open the material-ui website on an iPhone or xCode iPhone simulator
2. Open one of the menus
3. Zoom all the way in, then move around while zoomed in
4. Zoom out and the menu will be in a different location out of view

## Context 🔦

<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->

We have users who would like to navigate through forms zoomed in or would like to zoom in to read the text on the MenuItems without losing their place.

## Your Environment 🌎

<!--
  Run `npx @material-ui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->

```
   System:
    OS: Windows 10 10.0.18363
  Binaries:
    Node: 12.18.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\ec\src\Aspen.Canopy.eCommerce\Client\node_modules\.bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 86.0.4240.198
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @material-ui/core: ^4.5.0 => 4.11.2
    @material-ui/icons: ^4.0.1 => 4.11.2
    @material-ui/lab: ^4.0.0-alpha.28 => 4.0.0-alpha.57
    @material-ui/pickers: ^3.2.4 => 3.2.10
    @material-ui/styles:  4.11.2
    @material-ui/system:  4.11.2
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react: 16.8.2 => 16.8.2
    react: ^16.8.1 => 16.14.0
    react-dom: ^16.8.1 => 16.14.0
    typescript: ^3.5.1 => 3.9.7
```