我正在开发 PWA 并使用移动 Safari 在 iPhone 上进行测试。
请注意，我是 React 和 Material-ui 新手，所以可能错过了一些明显的东西;)
我面临的问题是我无法让底部导航组件呈现在页面的最底部。
注意:仅当我使用 iPhone 上 Safari 中的“添加到主屏幕”选项安装 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:在 iOS 11.3.1 的 iPhone 6、7 和 8 上测试
更新2:演示链接:https://material-ui-bottomnav-pwa.herokuapp.com/
更新 3:更好的图片来突出问题。
最佳答案
我对 HTML 进行了一些操作，删除了一些节点并设置了特定的样式属性，只是为了观察渲染文档的行为方式。看起来底部栏是由 <body> 引起的元素，但没有内容或样式负责它。因此，从我 5 分钟的调试 session 来看，它看起来像是一个渲染错误，但我可能是错的:)
好消息:它是可以修复的。我能够通过应用 min-height: 100vh 来摆脱底部栏。到app容器，最终迫使<body>元素跨越整个屏幕。
关于reactjs - Material 用户界面 : Bottom Navigation alignment with Progressive Web App (PWA) Safari on IOS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52526089/