[Modal] Zoom out stuck on iPhone (fullscreen)

[missbruni]

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)

• 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 😯

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:

1. Using an IPhone
2. Go to to https://material-ui.com/components/dialogs/#dialog
3. Scroll Down to FullScreen Dialog Example and Open the Dialog
4. Pinch Zoom in
5. 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.

[oliviertassinari]

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 :).

[xddz9]

+1, having the same issue using the Modal component.

[oliviertassinari]

@xddz9 Do you want to submit a pull request? :)

[TommyJackson85]

Has a PR being set up for this Issue? I am happy to try and fix it my self if nobody hasn't already.

[joshwooding]

@TommyJackson85 As far as I’m aware nothing has been done yet so give it a go :)

[TommyJackson85]

Ok I will try. Would Chrome developer tools be enough to test this on my mobile platforms? Can anybody recommend a better method?

[TommyJackson85]

I tested this on iPhone 11 regular and the bug is with this device also.
Here is the PR request which I will keep updating as I go.

[karthik-js]

@joshwooding I have similar issue.

I am using
React - V16.8.6
material ui - v3.8.3
IOS - 13
I wanna know if this issue exists in 3.8.3 version of material ui. Can you confirm?

[oliviertassinari]

@Karthik922 Upgrade to the latest version