title: Material UI: Bottom Navigation alignment with Progressive Web App (PWA) Safari on IOS
body: <p>I am developing a PWA and testing on an iPhone using mobile Safari.</p>
  
  <p>Please note I am new to React and material-ui so may have missed something obvious ;)</p>
  
  <p>The issue I am facing is that I cannot get the Bottom Navigation component to render at the very bottom of the page. </p>
  
  <p>NOTE: this issue only occurs when I install the PWA using the "Add To Homescreen" option from within Safari on an iPhone and thn open using the icon:</p>
  
  <p>Here is a screenshot of browsing the page in safari, the bottom nav renders fine:</p>
  
  <p><a href="https://i.stack.imgur.com/AUd7B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUd7B.png" alt="Browsing the PWA using safari"></a></p>
  
  <p>Add the page to the home screen:</p>
  
  <p><a href="https://i.stack.imgur.com/QXXq8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QXXq8.png" alt="enter image description here"></a></p>
  
  <p>Open using the home screen icon. Note the bottom nav is no longer on the bottom:</p>
  
  <p><a href="https://i.stack.imgur.com/FNnJ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FNnJ0.png" alt="enter image description here"></a></p>
  
  <p>The code and style is as follows:</p>
  
  <pre><code>const styles = {
    root: {
      position: 'fixed',
      bottom: 0,
      width: '100%',
    },
  };
  
  class BottomNav extends React.Component {
    state = {
      value: 0,
    };
  
    handleChange = (event, value) =&gt; {
      this.setState({ value });
    };
  
    render() {
      const { classes } = this.props;
      const { value } = this.state;
  
      return (
        &lt;BottomNavigation
          value={value}
          onChange={this.handleChange}
          showLabels
          className={classes.root}
        &gt;
          &lt;BottomNavigationAction label="Recents" icon={&lt;RestoreIcon /&gt;} /&gt;
          &lt;BottomNavigationAction label="Favorites" icon={&lt;FavoriteIcon /&gt;} /&gt;
          &lt;BottomNavigationAction label="Nearby" icon={&lt;LocationOnIcon /&gt;} /&gt;
        &lt;/BottomNavigation&gt;
      );
    }
  }
  </code></pre>
  
  <p>Appreciate any suggestions on how to fix this.</p>
  
  <p>Additional image to highlight problem:</p>
  
  <p><a href="https://i.stack.imgur.com/glR0l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/glR0l.png" alt="enter image description here"></a></p>
  
  <p>--</p>
  
  <p>UPDATE 1: Tested on iPhone 6, 7 and 8 on IOS 11.3.1</p>
  
  <p>UPDATE 2: Demo link: <a href="https://material-ui-bottomnav-pwa.herokuapp.com/" rel="nofollow noreferrer">https://material-ui-bottomnav-pwa.herokuapp.com/</a></p>
  
  <p>UPDATE 3: Better picture to highlight issue.</p>