ios端微信h5页面上下滑动时卡顿、页面缺失

最近在做微信h5方面的项目，遇到一个很尴尬的问题：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。

解决方案很简单，在公用css文件加入下面这行代码，问题就解决了。

* {
    -webkit-overflow-scrolling: touch;
}
复制代码

但是！！！这个属性是有bug的，如果页面中有设置了绝对定位的节点，那么该节点的显示会错乱。

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。 有两个属性值：

auto 使用普通滚动，当手指从触摸屏移开，滚动会立即停止

touch 使用具有回弹效果的滚动，当手指从触摸屏移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动的手势强烈程度成正比。同事也会创建一个新的堆栈上下文。

参考链接：developer.mozilla.org/zh-CN/docs/…

转载于:https://juejin.im/post/5bda5d945188257f45456b3e