微信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。

可能會影響到頁面的整體效果，沒有試