iPhone mobile safari fixed 元素滾動慢的問題處理

最近作一個手機閱讀應用，抓取網站數據，作格式化後，適合手機瀏覽器以及電腦上閱讀，不顯示任何其餘內容無關元素。

Site：http://cbread.duapp.com/

固定左側邊欄時，使用的CSS以下：

#listWrapper {
  height:100%;
  width:90%;
  left: 0;
  top: 0;
  z-index:-1;
  -webkit-transition: visibility 0s linear 0.2s;
  transition: visibility 0s linear 0.2s;
  position:fixed;
  overflow-x:hidden;
  overflow-y:auto;
  background-color:#DFDDD9;
  visibility:hidden;
  text-shadow: #FAFAF9 0 1px 0;
}

#listWrapper.show{
  visibility:visible;
  z-index:1;
  -webkit-transition: z-index 0s linear .2s;
  transition: z-index 0s linear .2s;  
}

 

可是發現固定元素（position:fixed）內部的列表滾動時，在iphone 上性能很是差，簡直不可接受，須要考慮其餘解決方案

一種是在顯示時將該元素position屬性改成其它的好比absolute，性能立馬提升，可是樣式切換來切換去會影響動畫性能，並且左右兩邊的滾動位置會互相影響。

 

第二方案是使用

-webkit-overflow-scrolling: touch;

列表滑動性能還能夠接受，可是有個問題，在ipad iOS 5.1 上面貌似劃不動…目前尚未找到替代方案。

 

第三個方法是使用iScroll插件，滾動時能夠了，可是滾動性能不夠好，並且這個還會形成其它問題，放棄。

 

 

目前使用的是方案二，再繼續找更好的解決方法…