I recently ran into an issue where a button anchored to the bottom of a Drawer was hidden behind mobile Safari's button bar. Looking for solutions to this problem, I found this comment, which linked to this article. The article describes how Safari and other mobile browsers have a unique interpretation of what 100vh means, which includes the area behind the button bar at the bottom.

Luckily, the workaround is easy: the browser interprets a height of 100% to be the full height of the visible space at any given moment, whereas 100vw is the full height of the viewport after a scroll event causes the button bar to disappear. It's counterintuitive, but it means that the more common value of 100% works for all platforms.

Material-ui has the Drawer component set to a default height of 100vh. This not only causes a problem in mobile browsers, but it could be argued that 100% is a more logical value. For example, a Drawer used to house navigation elements should be the same height as its container, not as the viewport. Think of a modal with fixed navigation on the left and you'll understand where I'm coming from.

My experience was in regards to the Drawer, but I believe any other components set to a height of 100vh run the risk of being covered by mobile browser navigation buttons.

• This is a v1.x issue.

  I have searched the issues of this repository and believe that this is not a duplicate.
  To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.

Expected Behavior

Elements at the bottom of a full-height component like Drawer should be visible on all browsers.

Current Behavior

Some mobile browsers (like Safari on iOS) hide the bottommost elements in a full-height component behind button bars at the bottom.

Steps to Reproduce

Take a look at this simple example: https://codesandbox.io/s/1qy5mrwjw3
To see the sandbox in your browser, open this URL: https://1qy5mrwjw3.codesandbox.io/
On mobile Safari, the button bar covers the red rectangle.

Create a fork of this sandbox and take note of the new url in the "browser" pane on the right. Uncomment height: '100%' and save. Open that url in mobile Safari. You should be able to see the red rectangle.