Material UI：底部导航与 IOS 上的渐进式 Web 应用程序 (PWA) Safari 对齐

Question

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

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

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

注意：仅当我在 iPhone 上使用 Safari 中的 "Add To Homescreen" 选项安装 PWA，然后使用图标打开时才会出现此问题：

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

将页面添加到主屏幕：

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

代码及样式如下：

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：在 iPhone 6、7 和 8 上测试 IOS 11.3.1

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

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

Answer 1

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

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

Material UI：底部导航与 IOS 上的渐进式 Web 应用程序 (PWA) Safari 对齐

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

mobile-safari

reactjs

material-ui

bottomnavigationview

bottombar