mui / mui/material-ui

[Popover] Repositions After Pinch Zoom Safari Mobile

Open
#23,919 4 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

component: Popover scope: menu scope: popup scope: select type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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

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

Current 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 🤔

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 🕹

(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 🔦

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 🌎

   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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.