Material-ui: [Modal] Zoom out stuck on iPhone (fullscreen)

Created on 7 Jan 2020 · 9Comments · Source: mui-org/material-ui

Dialog Fullscreen does not zoom out after zooming in on IPhone.
We tested this on: IPhone X, SE, XR, 9, 10. Different IOS versions. (IOS 13, 13.3 and 12.4)

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

Current Behavior 😯

Problem: It does not Zoom Out, user stuck on Zoom.

Expected Behavior 🤔

Expected Behaviour: Screen Zooms Out. (It works on Android)

Steps to Reproduce 🕹

Steps:

Using an IPhone
Go to to https://material-ui.com/components/dialogs/#dialog
Scroll Down to FullScreen Dialog Example and Open the Dialog
Pinch Zoom in
Try to Zoom Out

Context 🔦

We are using fullscreen Dialog for our mobile app and this has been reported as an issue. Upon investigation we realised this is a MUI bug as we can replicate it with the demo dialog.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.5.2 |
| React | v.16.9 |
| Browser | Chrome, Safari (Didn't check others) |
| TypeScript | v3.5.3 |
| etc. | |

bug 🐛 Modal good first issue

Source

missbruni

👍3

All 9 comments

What do you think of this diff?

diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
index 543bf6914..2b919c680 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -19,8 +19,6 @@ export const styles = {
     left: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
   },
   /* Styles applied to the root element if `invisible={true}`. */
   invisible: {
diff --git a/packages/material-ui/src/Modal/SimpleBackdrop.js b/packages/material-ui/src/Modal/SimpleBackdrop.js
index ec76fd345..c15705f26 100644
--- a/packages/material-ui/src/Modal/SimpleBackdrop.js
+++ b/packages/material-ui/src/Modal/SimpleBackdrop.js
@@ -12,8 +12,6 @@ export const styles = {
     left: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
   },
   /* Styles applied to the root element if `invisible={true}`. */
   invisible: {

Does it fix the issue on your side? Do you want to submit a pull request?

I suspect a bug on iOS. This line was introduced to solve #12094 (2018). However, @joshwooding found a better approach, later on, #16162 (2019). I believe we do no longer need this logic :).