[问题探讨]规避H5开发ios使用fixed造成的闪屏

问题：

H5开发ios，给页面头部使用fixed出现闪屏现象；

分析：

使用fixed给头部定位，页面滚动时，ios中出现屏幕中被固定的头部页面在滚动过程中闪屏，在安卓中未发现此问题。可见fixed在iso中并不稳定。

解决：

头部用普通文档流替代fixed定位，滚动区域改为div内部滚动，如下图：

代码实现：

时间仓促，不做具体demo，只将核心代码写一下：

/*头部*/
header: {
  height: 1rem;
}
/*滚动内容区*/
main: {
  /*高度界定*/
  height: calc(100%-1rem);
  /*横向移除隐藏*/
  overflow-x: hidden;
  /*纵向移除隐藏，导航条在需要时显示*/
  overflow-y: auto;
  /*模拟IOS原生滚动回弹效果，提升滚动体验 */
  -webkit-overflow-scrolling: touch;
}

提醒：

代码实现基于vue框架，其中：“height: calc(100%-1rem);”用到了less和rem的设置，不清楚设置步骤的，可以看我下面的博文：
新建一个vue空白项目并上传到github上