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插件，滚动时能够了，可是滚动性能不够好，并且这个还会形成其它问题，放弃。

 

 

目前使用的是方案二，再继续找更好的解决方法…