Search code examples
reactjsmobile-safarimaterial-uibottomnavigationviewbottombar

Material UI: Bottom Navigation alignment with Progressive Web App (PWA) Safari on IOS

I am developing a PWA and testing on an iPhone using mobile Safari.

Please note I am new to React and material-ui so may have missed something obvious ;)

The issue I am facing is that I cannot get the Bottom Navigation component to render at the very bottom of the page.

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:

Here is a screenshot of browsing the page in safari, the bottom nav renders fine:

Browsing the PWA using safari

Add the page to the home screen:

enter image description here

Open using the home screen icon. Note the bottom nav is no longer on the bottom:

enter image description here

The code and style is as follows:

const styles = {
  root: {
    position: 'fixed',
    bottom: 0,
    width: '100%',
  },
};

class BottomNav extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <BottomNavigation
        value={value}
        onChange={this.handleChange}
        showLabels
        className={classes.root}
      >
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    );
  }
}

Appreciate any suggestions on how to fix this.

Additional image to highlight problem:

enter image description here

--

UPDATE 1: Tested on iPhone 6, 7 and 8 on IOS 11.3.1

UPDATE 2: Demo link: https://material-ui-bottomnav-pwa.herokuapp.com/

UPDATE 3: Better picture to highlight issue.

Solution

  • I played a bit with the HTML, removed some nodes and set specific style attributes, just to observe how the rendered document behaves. It looks like the bottom bar is caused by the <body> element, but there's no content or style responsible for it. So, judging from my 5 minute debugging session, it looks like a render bug but I might be wrong :)

    The good news: It's fixable. I was able to get rid of the bottom bar by appyling min-height: 100vh to the app container, which ultimately forces the <body> element to span over the whole screen.