Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Modal] Fix zoom out on iOS #19548

Merged
merged 3 commits into from
Feb 4, 2020
Merged

[Modal] Fix zoom out on iOS #19548

merged 3 commits into from
Feb 4, 2020

Conversation

TommyJackson85
Copy link
Contributor

@TommyJackson85 TommyJackson85 commented Feb 3, 2020 •
edited by oliviertassinari
Loading

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.

Closes #19117

@mui-pr-bot
Copy link

mui-pr-bot commented Feb 3, 2020 •
edited
Loading

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

@TommyJackson85 TommyJackson85 mentioned this pull request Feb 3, 2020
Closed
2 tasks
@TommyJackson85
removed comment:Disable scroll capabilitiand touchAction from constan…
f049fab 
…t styles found in Backdrop and SimpleBackdrop js files.
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module! labels Feb 3, 2020
@oliviertassinari oliviertassinari changed the title fix: Issue: #19117: Fixing zoom out on tap on iPhone using dialog fullscreen as an example. [Modal] Fix zoom out on iOS Feb 3, 2020
@oliviertassinari
Copy link
Member

@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
Copy link
Contributor Author

@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
Copy link
Member

oliviertassinari commented Feb 3, 2020 •
edited
Loading

@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
Copy link
Contributor Author

TommyJackson85 commented Feb 3, 2020 via email

@oliviertassinari oliviertassinari merged commit 1a949cd into mui:master Feb 4, 2020
@oliviertassinari
Copy link
Member

@TommyJackson85 Yes, I confirm, it works :)

@missbruni
Copy link

@oliviertassinari and @TommyJackson85 thanks!

@missbruni
Copy link

@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
Copy link
Member

It will be release within a week.

EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Feb 13, 2020
@TommyJackson85 @EsoterikStare
[Modal] Fix zoom out on iOS (mui#19548)
b534310
This was referenced Mar 10, 2020
Merged
Merged
Merged
Closed
Closed
Closed
This was referenced Mar 21, 2020
Merged
Open
This was referenced Apr 16, 2020
Merged
Closed
@snyk-bot snyk-bot mentioned this pull request May 4, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Modal] Zoom out stuck on iPhone (fullscreen)
4 participants
@TommyJackson85 @mui-pr-bot @oliviertassinari @missbruni