[Dialog] See under full screen when mobile Chrome address bar hides itself

[djeeg]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Content under the dialog should ideally not be visible when touch moving the dialog

Current Behavior

Using mobile Chrome, when I scroll the dialog up, I can see the content under the dialog

Steps to Reproduce (for bugs)

Steps to reproduce:

1. Go here https://material-ui.com/demos/dialogs/
2. Scroll down to "Full-screen dialogs" (address bar should be hidden by now)
3. Scroll up a little bit, so the Chrome address bar shows
4. Now open the dialog
5. Note: Chrome address bar is showing
6. Click and hold drag the dialog content up, notice that the address bar goes and you can see the content under the dialog
7. Release the drag, dialog resizes to full screen again

Context

This experience seems to be linked to this Chrome behaviour
https://developers.google.com/web/updates/2016/12/url-bar-resizing

When using position:fixed, 100% means the actual viewport size (where as 100vh non-fixed is viewport size - address bar size)

It may be possible to fix this by temporarily increasing the height of the full screen dialog by an estimated size of the address bar.

May be similar to #5750

Your Environment

Tech	Version
Material-UI	1.0.0-beta.34
React
browser	mobile Chrome latest
etc

[oliviertassinari]

Using mobile Chrome, when I scroll the dialog up, I can see the content under the dialog

@djeeg I'm able to reproduce this behavior. However, it's only temporary, the height is adjusted as soon as I release my finger. So the impact is very limited. The fullscreen style comes from:
https://github.com/mui-org/material-ui/blob/9c68f852e1b4631fec6185109d5245f892e2fa76/src/Dialog/Dialog.js#L42-L49

I'm not aware of any way to solve this issue.

It may be possible to fix this by temporarily increasing the height of the full-screen dialog by an estimated size of the address bar.

Won't that be worse? Making the bottom of the dialog offscreen and unreachable?

[djeeg]

impact is very limited

Yes agree.

I'm going to try something like this, and play around with the positioning to see if I can get a smooth UX

<Paper ...>
          ...
	  {children}
</Paper>
{
	fullScreen || (
		<div style={{position: 'fixed', bottom: -100, height: 100, width: '100%', backgroundColor: 'white'}}>
		</div>
	)
}

[oliviertassinari]

@djeeg Feel free to submit a pull request if you find something elegant for improving the situation :). I'm closing the issue as it's not something I think it's important to address and that might not be fixable without a large overhead.