[Modal] Fix zoom out on iOS

[TommyJackson85]

Attempting to fix this issue.

• The bug also appears in iPhone 11, prior to making the changes.
• Made the requested changes from the issue and now I can zoom in and out on dialog fullscreen.
  -test static seems to be failing.

Deployed link of this branch to test on mobile:
https://deploy-preview-19548--material-ui.netlify.com/

Anything else I can do to test it let me know. Before merging, It might good to use this PR to test other instances of this issue if they exist elsewhere and not just dialog fullscreen. Like other pages with similar code:
// Disable scroll capabilities. touchAction: 'none',

I will keep editing / updating this initial post with the significant changes.

• I have followed (at least) the PR section of the contributing guide.

Closes #19117

[mui-pr-bot]

Details of bundle changes.

Comparing: 62e439b...61a15ab

bundle	Size Change	Size	Gzip Change	Gzip
docs.main	▼ -38 B (-0.01% )	596 kB	▼ -18 B (-0.01% )	194 kB
@material-ui/core[umd]	▼ -38 B (-0.01% )	317 kB	▼ -16 B (-0.02% )	92 kB
@material-ui/core	▼ -38 B (-0.01% )	362 kB	▼ -15 B (-0.02% )	98.9 kB
Dialog	▼ -38 B (-0.05% )	83.2 kB	▼ -13 B (-0.05% )	25.9 kB
Drawer	▼ -38 B (-0.04% )	85 kB	▼ -9 B (-0.03% )	25.8 kB
SwipeableDrawer	▼ -38 B (-0.04% )	92.4 kB	▼ -8 B (-0.03% )	28.9 kB
Modal	▼ -19 B (-0.13% )	14.5 kB	▼ -12 B (-0.24% )	5.04 kB
Backdrop	▼ -19 B (-0.03% )	68 kB	▼ -11 B (-0.05% )	21 kB
TextField	▼ -19 B (-0.02% )	125 kB	▼ -11 B (-0.03% )	36.6 kB
Popover	▼ -19 B (-0.02% )	83.3 kB	▼ -9 B (-0.03% )	25.8 kB
Select	▼ -19 B (-0.02% )	117 kB	▼ -9 B (-0.03% )	34.6 kB
Menu	▼ -19 B (-0.02% )	88.9 kB	▼ -7 B (-0.03% )	27.4 kB
TablePagination	▼ -19 B (-0.01% )	144 kB	▼ -5 B (-0.01% )	42 kB
@material-ui/lab	--	185 kB	--	55.2 kB
@material-ui/styles	--	51.4 kB	--	15.4 kB
@material-ui/system	--	16.4 kB	--	4.3 kB
Alert	--	83.6 kB	--	26.3 kB
AlertTitle	--	64.3 kB	--	20.3 kB
AppBar	--	64.2 kB	--	20.1 kB
Autocomplete	--	132 kB	--	41.4 kB
Avatar	--	65.4 kB	--	20.6 kB
AvatarGroup	--	62.4 kB	--	19.6 kB
Badge	--	65.5 kB	--	20.4 kB
BottomNavigation	--	62.6 kB	--	19.6 kB
BottomNavigationAction	--	75.7 kB	--	23.9 kB
Box	--	72 kB	--	21.8 kB
Breadcrumbs	--	67.9 kB	--	21.3 kB
Button	--	79.9 kB	--	24.5 kB
ButtonBase	--	74.2 kB	--	23.3 kB
ButtonGroup	--	83.4 kB	--	25.5 kB
Card	--	63 kB	--	19.7 kB
CardActionArea	--	75.3 kB	--	23.7 kB
CardActions	--	62.2 kB	--	19.5 kB
CardContent	--	62.1 kB	--	19.5 kB
CardHeader	--	65.2 kB	--	20.5 kB
CardMedia	--	62.5 kB	--	19.7 kB
Checkbox	--	83.2 kB	--	26.3 kB
Chip	--	82.8 kB	--	25.4 kB
CircularProgress	--	64.3 kB	--	20.3 kB
ClickAwayListener	--	3.91 kB	--	1.55 kB
Collapse	--	68.2 kB	--	21.1 kB
colorManipulator	--	3.88 kB	--	1.52 kB
Container	--	63.3 kB	--	19.8 kB
CssBaseline	--	57.7 kB	--	18.1 kB
DialogActions	--	62.2 kB	--	19.5 kB
DialogContent	--	62.4 kB	--	19.6 kB
DialogContentText	--	64.2 kB	--	20.2 kB
DialogTitle	--	64.4 kB	--	20.2 kB
Divider	--	62.7 kB	--	19.7 kB
docs.landing	--	56.4 kB	--	14.5 kB
ExpansionPanel	--	72.5 kB	--	22.7 kB
ExpansionPanelActions	--	62.2 kB	--	19.5 kB
ExpansionPanelDetails	--	62.1 kB	--	19.5 kB
ExpansionPanelSummary	--	78.3 kB	--	24.7 kB
Fab	--	77 kB	--	24 kB
Fade	--	23.4 kB	--	7.97 kB
FilledInput	--	73.7 kB	--	22.9 kB
FormControl	--	64.6 kB	--	20.2 kB
FormControlLabel	--	65.7 kB	--	20.6 kB
FormGroup	--	62.2 kB	--	19.5 kB
FormHelperText	--	63.5 kB	--	20 kB
FormLabel	--	63.6 kB	--	19.8 kB
Grid	--	65.3 kB	--	20.5 kB
GridList	--	62.6 kB	--	19.7 kB
GridListTile	--	63.9 kB	--	20 kB
GridListTileBar	--	63.4 kB	--	19.9 kB
Grow	--	24 kB	--	8.19 kB
Hidden	--	66.1 kB	--	20.8 kB
Icon	--	62.9 kB	--	19.8 kB
IconButton	--	76.3 kB	--	23.8 kB
Input	--	72.7 kB	--	22.7 kB
InputAdornment	--	65.3 kB	--	20.5 kB
InputBase	--	70.8 kB	--	22.2 kB
InputLabel	--	65.5 kB	--	20.2 kB
LinearProgress	--	65.5 kB	--	20.5 kB
Link	--	66.8 kB	--	21.1 kB
List	--	62.5 kB	--	19.5 kB
ListItem	--	77.3 kB	--	24.2 kB
ListItemAvatar	--	62.3 kB	--	19.5 kB
ListItemIcon	--	62.3 kB	--	19.5 kB
ListItemSecondaryAction	--	62.2 kB	--	19.5 kB
ListItemText	--	65.1 kB	--	20.5 kB
ListSubheader	--	62.9 kB	--	19.8 kB
MenuItem	--	78.4 kB	--	24.5 kB
MenuList	--	66.2 kB	--	20.7 kB
MobileStepper	--	68 kB	--	21.4 kB
NativeSelect	--	77 kB	--	24.3 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	74.7 kB	--	23.3 kB
Paper	--	62.5 kB	--	19.5 kB
Popper	--	28.8 kB	--	10.3 kB
Portal	--	2.92 kB	--	1.3 kB
Radio	--	84.2 kB	--	26.6 kB
RadioGroup	--	64.6 kB	--	20.1 kB
Rating	--	70.7 kB	--	22.7 kB
RootRef	--	4.24 kB	--	1.64 kB
Skeleton	--	63.1 kB	--	20 kB
Slide	--	25.5 kB	--	8.71 kB
Slider	--	76.8 kB	--	24.3 kB
Snackbar	--	75.6 kB	--	23.7 kB
SnackbarContent	--	63.7 kB	--	20.1 kB
SpeedDial	--	86.4 kB	--	27.2 kB
SpeedDialAction	--	119 kB	--	37.5 kB
SpeedDialIcon	--	64.7 kB	--	20.3 kB
Step	--	62.8 kB	--	19.7 kB
StepButton	--	82.5 kB	--	26.1 kB
StepConnector	--	62.9 kB	--	19.8 kB
StepContent	--	69.3 kB	--	21.7 kB
StepIcon	--	64.8 kB	--	20.2 kB
StepLabel	--	68.8 kB	--	21.7 kB
Stepper	--	65 kB	--	20.5 kB
styles/createMuiTheme	--	16.5 kB	--	5.81 kB
SvgIcon	--	63.2 kB	--	19.8 kB
Switch	--	82.3 kB	--	26 kB
Tab	--	76.5 kB	--	24.2 kB
Table	--	62.7 kB	--	19.7 kB
TableBody	--	62.3 kB	--	19.5 kB
TableCell	--	64.2 kB	--	20.2 kB
TableContainer	--	62.1 kB	--	19.5 kB
TableFooter	--	62.3 kB	--	19.5 kB
TableHead	--	62.3 kB	--	19.5 kB
TableRow	--	62.6 kB	--	19.7 kB
TableSortLabel	--	77.6 kB	--	24.4 kB
Tabs	--	85.8 kB	--	27.2 kB
TextareaAutosize	--	5.12 kB	--	2.14 kB
ToggleButton	--	76.3 kB	--	24.2 kB
ToggleButtonGroup	--	63.4 kB	--	20 kB
Toolbar	--	62.5 kB	--	19.6 kB
Tooltip	--	102 kB	--	32.4 kB
TreeItem	--	74.2 kB	--	23.5 kB
TreeView	--	66.8 kB	--	21.1 kB
Typography	--	63.8 kB	--	20 kB
useAutocomplete	--	14.6 kB	--	5.3 kB
useMediaQuery	--	2.58 kB	--	1.07 kB
Zoom	--	23.5 kB	--	8.1 kB

Generated by 🚫 dangerJS against 61a15ab

[oliviertassinari]

@TommyJackson85 You can test on mobile using the local dev tool. When you start the documentation, yarn docs:dev, it displays the IP of your machine on your local network

INFO 20004 http: ready on http://localhost:3000 and http://192.168.1.86:3000

If you can get a real phone on the same network, you can navigate the URL and test the changes without a deploy on Netlify :).

[TommyJackson85]

@TommyJackson85 You can test on mobile using the local dev tool. When you start the documentation, yarn docs:dev, it displays the IP of your machine on your local network

INFO 20004 http: ready on http://localhost:3000 and http://192.168.1.86:3000

If you can get a real phone on the same network, you can navigate the URL and test the changes without a deploy on Netlify :).

oh that is great :) I'll consider it for next time. How do you feel about it now? Will there need to be anymore changes? There is an Argos error.

By the way, sorry I forgot to delete that comment :) I wrote it because I just wanted to make an initital commit to create the PR first for testing.

[oliviertassinari]

@TommyJackson85 I think that we are good with Argos. I have approved the change, it's a flaky test. Something is strange, I have seen it fails frequently lately, maybe the logic that wait the font to load doesn't work anymore, no idea.

@missbruni Could you make sure it works as expected on https://deploy-preview-19548--material-ui.netlify.com/? Thanks :)

[TommyJackson85]

Well I noticed it worked after I submitted your changes from manually testing. Why was the code put there in the first place (in which you suggested to remove)?

…

Sent from my iPhone

On 3 Feb 2020, at 21:56, Olivier Tassinari ***@***.***> wrote:  @TommyJackson85 I think that we are good with Argos. I have approved the change, it's a flaky test. Something is strange, I have seen it fails frequently lately, maybe the logic that waits the font to load doesn't work anymore, no idea. @missbrun Could you make sure it works as expected on https://deploy-preview-19548--material-ui.netlify.com/? Thanks — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[oliviertassinari]

@TommyJackson85 Yes, I confirm, it works :)

[missbruni]

@oliviertassinari and @TommyJackson85 thanks!

[missbruni]

@oliviertassinari I can see that the fix is working here: https://deploy-preview-19548--material-ui.netlify.com/ but not on the latest version 4.9.1, is this fix yet to be released?

[oliviertassinari]

It will be release within a week.