IOS H5页面滑动过于频繁出现短暂白屏

最近做一个H5活动,苹果部分手机用QQ扫描打开后,频繁滑动出现短暂白屏现象, 数据均存在只是背景色变白,问题如下:

IOS H5页面滑动过于频繁出现短暂白屏_第1张图片 

IOS H5页面滑动过于频繁出现短暂白屏_第2张图片

经过排查主要是由于IOS的回弹效果导致,即-webkit-overflow-scrolling:touch

由于使用-webkit-overflow-scrolling这个属性,苹果手机会使用硬件加速,从而促使页面滑动得更加流畅,然而也导致了页面出现空白的情况。

下面是在网上看其他人说的:

IOS H5页面滑动过于频繁出现短暂白屏_第3张图片

我的页面主要两处用到此属性,一个是页面整体的大容器container 另一个是该页面有一个活动列表设置了局部滚动,因为局部滚动的原因 控制整体页面不会出现滚动条,因此就把container上的 回弹效果去掉,就解决了问题。

 

哪位前端大神知道-webkit-overflow-scrolling:touch引起的这种短暂白屏卡顿现象最优解决方案望告知

 

 

网上看到的一些该属性的注意点(没亲测,有问题望指出):

1、单独对body设置-webkit-overflow-scrolling touch是无效的,需要针对html和body同时设置才有效果

 2、父容器设置-webkit-overflow-scrolling=touch后,子容器不允许出现fixed固定的子元素。因为当你设定-webkit-overflow-scrolling=touch后,你滑动屏幕的时候会发现fixed属性失效了,他也跟着屏幕滚动了,只有当滚动停止的时候这个元素才会在固定到页面上。(解决:不把-webkit-overflow-scrolling设置在body元素上,而是在需要滚动的地方另外增加div容器去设定,然后把需要fixed的容器都直接放在body元素内)

4、兼听滚动条的滚动事件,发现scrollTop不会时时更新,要等到页面停止滚动后才能获取到scrollTop值

5、页面滚动过程中transition动画不会执行

你可能感兴趣的:(前端)