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

 

 

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