Material UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐答案

【问题标题】：Material UI: Bottom Navigation alignment with Progressive Web App (PWA) Safari on IOSMaterial UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐
【发布时间】：2018-09-26 21:12:00
【问题描述】：

我正在使用移动版 Safari 开发 PWA 并在 iPhone 上进行测试。

请注意，我是 React 和 material-ui 的新手，所以可能错过了一些明显的东西 ;)

我面临的问题是我无法让底部导航组件呈现在页面的最底部。

注意：仅当我使用 iPhone 上的 Safari 中的“添加到主屏幕”选项安装 PWA 并使用图标打开时才会出现此问题：

这是在 safari 中浏览页面的截图，底部 nav 渲染良好：

将页面添加到主屏幕：

使用主屏幕图标打开。请注意底部导航不再位于底部：

代码及样式如下：

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>
    );
  }
}

感谢有关如何解决此问题的任何建议。

突出问题的附加图像：

更新 1：在 iOS 11.3.1 上的 iPhone 6、7 和 8 上测试

更新 2：演示链接：https://material-ui-bottomnav-pwa.herokuapp.com/

更新 3：更好的图片来突出问题。

【问题讨论】：

标签： reactjs mobile-safari material-ui bottomnavigationview bottombar

【解决方案1】：

我玩了一下 HTML，删除了一些节点并设置了特定的样式属性，只是为了观察呈现的文档的行为方式。看起来底部栏是由 <body> 元素引起的，但没有内容或样式对此负责。所以，从我 5 分钟的调试会话来看，它看起来像一个渲染错误，但我可能错了 :)

好消息：这是可以修复的。我可以通过将min-height: 100vh 应用到app 容器来摆脱底部栏，这最终会强制<body> 元素跨越整个屏幕。

【讨论】：