<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Menu's popover position after zoom is the same as in case no zoom was performed.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The position of popover is awkward on iOS devices.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Issue could be reproduced on material-ui official website, on IconMenu component subpage:<br>
<a href="http://www.material-ui.com/#/components/icon-menu" rel="nofollow">http://www.material-ui.com/#/components/icon-menu</a><br>
Seems to be reproducible for material-ui v1 as well:<br>
<a href="https://material-ui.com/demos/menus/#max-height-menus" rel="nofollow">https://material-ui.com/demos/menus/#max-height-menus</a></p>
<ol dir="auto">
<li>Open page on iOS device.</li>
<li>Click on IconMenu, popover position should be good.</li>
<li>Zoom page, click on IconMenu again, the popover position will be awkward (as on the screen attached).</li>
<li>If Popover position is normal, zoom page more or less and repeat step 3.</li>
</ol>
<p dir="auto">Attaching screenshots for conveniece:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/29929297/34716796-38db3b00-f531-11e7-9de8-e66a9157c9d6.PNG"><img src="https://user-images.githubusercontent.com/29929297/34716796-38db3b00-f531-11e7-9de8-e66a9157c9d6.PNG" alt="initial" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/29929297/34716797-38f831a6-f531-11e7-89cd-feb468272d94.PNG"><img src="https://user-images.githubusercontent.com/29929297/34716797-38f831a6-f531-11e7-89cd-feb468272d94.PNG" alt="zoomed" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">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.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Issue is related to iOS devices only, works good on Android.<br>
Tested on iPhone 8 and iPad, on both Chrome and Safari.</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>browser</td>
<td>Chrome, Safari</td>
</tr>
<tr>
<td>OS</td>
<td>iOS</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> The issue is present in the latest release.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> * I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">* There's an open issue related to <a href="https://github.com/mui-org/material-ui/issues/9802" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/9802/hovercard">IconMenu for iOS devices</a>, but this is not the same component, and also no longer exclusive to iOS devices but happens on Android also.</p>
<h2 dir="auto">Current Behavior 😯</h2>
<p dir="auto">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.<br>
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.</p>
<p dir="auto">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.</p>
<p dir="auto">We have also tested all the combinations of disableAutoFocus, disableEnforceFocus and disableRestoreFocus for the root modal props, but to no effect.</p>
<p dir="auto">The issue only happens on the actual mobile device, using the desktop Chrome Devtools to emulate the issue was unsuccessful.</p>
<h2 dir="auto">Expected Behavior <g-emoji class="g-emoji" alias="thinking" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f914.png">🤔</g-emoji></h2>
<p dir="auto">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 <code class="notranslate">touch-action: none</code> css for the backdrop, but was confused by its default value)</p>
<h2 dir="auto">Steps to Reproduce <g-emoji class="g-emoji" alias="joystick" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f579.png">🕹</g-emoji></h2>
<p dir="auto">The issue can be reproduced on the material-ui popover component demo website: <a href="https://material-ui.com/components/popover/" rel="nofollow">https://material-ui.com/components/popover/</a></p>
<p dir="auto">Including video of the interaction described in the steps below: <a href="https://drive.google.com/file/d/12MLICM7nngPuthRaVhXurLLkKq1212PK/view" rel="nofollow">https://drive.google.com/file/d/12MLICM7nngPuthRaVhXurLLkKq1212PK/view</a></p>
<p dir="auto">Steps:</p>
<ol dir="auto">
<li>
<p dir="auto">Browse on mobile Chrome to <a href="https://material-ui.com/components/popover/" rel="nofollow">https://material-ui.com/components/popover/</a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/18516271/65868518-18ed4500-e381-11e9-959f-09634f78f5c7.jpg"><img src="https://user-images.githubusercontent.com/18516271/65868518-18ed4500-e381-11e9-959f-09634f78f5c7.jpg" alt="popover1" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">Detect the "Simple Popover" demo section, slightly zoom in (device pinch) so that the "Open Popover" button is still visible.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/18516271/65868525-1db1f900-e381-11e9-9ba0-714b34e0a365.jpg"><img src="https://user-images.githubusercontent.com/18516271/65868525-1db1f900-e381-11e9-9ba0-714b34e0a365.jpg" alt="popover2" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">Click the "Open Popover" button<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/18516271/65868538-230f4380-e381-11e9-93d7-79e5a00755b1.jpg"><img src="https://user-images.githubusercontent.com/18516271/65868538-230f4380-e381-11e9-93d7-79e5a00755b1.jpg" alt="popover3" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">At this point, the popover is open but the page already scrolled itself up</p>
</li>
</ol>
<h2 dir="auto">Context <g-emoji class="g-emoji" alias="flashlight" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f526.png">🔦</g-emoji></h2>
<p dir="auto">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.<br>
We made heavy usage of modals, popovers and dialogs, but the current issue prevents users from completing simple actions.<br>
We believe that the issue is quite new and that the new Chrome mobile version might also have something to do with it.</p>
<h2 dir="auto">Your Environment <g-emoji class="g-emoji" alias="earth_americas" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f30e.png">🌎</g-emoji></h2>
<p dir="auto">Our local environment is a bit outdated (React v16.7 &amp; 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.</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v4.4.3 (latest)</td>
</tr>
<tr>
<td>React</td>
<td>v16.8.0+ (latest)</td>
</tr>
<tr>
<td>Browser</td>
<td>Google Chrome (mobile) 77.0.3865.92</td>
</tr>
<tr>
<td>Device</td>
<td>OnePlus 6 (ONEPLUS A6003), but happens on all of the Android and iOS devices we had a chance to test</td>
</tr>
</tbody>
</table>