ios下使用-webkit-overflow-scrolling出现卡顿无法滑动的bug解决

现在做的小程序项目需要适配iphoneX,所以不再使用page自身的滚动，需要在判断是iphoneX机型下把view底部留白34px;

34px是避开iphoneX底部的操作范围，以下代码同样适用H5。

实现方法：最外层用content包裹滚动，默认情况下滑动时手指松开即停止滑动。为了实现顺滑滚动，加上这句代码：

-webkit-overflow-scrolling: auto | touch;

auto:自然滚动，手指松开就不再滚动

touch:手指松开之后，会惯性滚动一段距离

*但是伴随着会产生一个bug:在ios滚动几下后会出现无法滚动的现象

解决办法，首先 content 的position一定不能是fixed,而是要absolute;然后再设置 z-index:1来解决这个问题 

如果在滚动时候出现页面不渲染，可以试试：

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);

下面贴出我的所有代码，可以做一下参考

.content,.iphonex-content{
  position:absolute;z-index:1;width:100%;top:0;bottom:0;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
}

.iphonex-content,.iphonex-button{
  bottom:34px!important;
}
.iphonex-button{
  z-index:2
}

留白底部的效果，可加可不加

.iphonex-button:after{
  position: absolute;content:'';width:100%;height:34px;bottom:-34px;left:0;
  background: -webkit-linear-gradient(left, #FCF9F9 , #FFB3B3);
  background: -o-linear-gradient(right, #FCF9F9, #FFB3B3);
  background: -moz-linear-gradient(right, #FCF9F9, #FFB3B3);
  background: linear-gradient(to right, #FCF9F9 , #FFB3B3);
}