Using a 100vw width causes glitchy behaviour on iOS when using the Inspector
Closed this issue · 4 comments
I'm using material-ui-fullscreen-dialog in a Cordova app. All appears to be well, until the Safari inspector is opened.
The dialog starts to vary its width somewhere between 98% and 100% of the screen width.
After opening the web inspector, the effect can be triggered by:
- Hovering elements in the web inspector.
- Interacting with the DOM.
A workaround is to set the width to 100%.
I think this is a bug in iOS or Safari, but it could this be worked around in this project by setting the width to 100% instead of 100vw?
Did you use a <meta> tag to set the viewport size?
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
Edit: Is opening the Safari Inspector a use-case for using this component? 😉 That only appears in development anyway.
Did you use a tag to set the viewport size?
Yep, I'm using that exact meta tag.
Edit: Is opening the Safari Inspector a use-case for using this component? 😉 That only appears in development anyway.
It's mainly very odd and distracting to see a full screen element twitch for no good reason. I'm not sure what the benefit is for using vw instead of % for the dialog.
I'm not sure what the benefit is for using vw instead of % for the dialog.
We want to spawn the entire viewport and not 100% of whatever may be the parent element of our dialog. That's why we have to use vw instead of 100%.
We might look into using a portal (as Material-UI does) instead, which would probably fix this issue.
I'm not even sure what that means 😛
Anyway, I consider this issue annoying, but low prio. As you stated: That only appears in development anyway.