微信position: fixed的坑及解决之道

问题描述

安卓手机上，微信环境下上传完图片后，position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况，抖动完回到原位。
ios上没测，但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。

解决之道

页面结构是：

<div id="#app"></div>
<nav fixed></nav>

对’#app’设置样式：

#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto
}

这个方法思路来源自张鑫旭的博客fixed在微信下的BUG。应用后安卓、ios均是好的，不会抖动。

思路和踩的坑

思路：

• 上传图片本身不会引发抖动，是因为图片上传后可能增加了新的一行，reflow导致的。

错误！如果是因为reflow导致的，那么在删除图片而减小一行后也会抖动，但实际并没有。问题还是出在上传图片这个动作上

踩坑（不完美/无效的解决方案）：

1. 给fixed加上translateZ(0)

加上以后不抖了，但失去了滚动时的弹性效果，即滚动没有惯性了，体验不好

2. 套一层wrapper，wrapper设为position: fixed, 内层的nav设为position: absolute。

完全无效，抖得可欢快了

3. 设置body, html的height: 100%; overflow: auto。

可能会影响到页面的整体效果，没有试