解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题

简介: 解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题


在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。

Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。

只需要在公共样式加入下面这行代码:

*{
  -webkit-overflow-scrolling: touch;/*解决IOS网页上下滑动卡顿缺失等问题*/
}

这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug。


-webkit-overflow-scrolling:touch是什么?

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

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

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


相关文章
|
2月前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
58 0
|
4月前
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
41 0
|
4月前
|
移动开发 iOS开发 Perl
iOS客户端和h5页面的互相调用,服务器和客户端间通信方式
iOS客户端和h5页面的互相调用,服务器和客户端间通信方式
43 0
|
4月前
|
移动开发 Android开发 iOS开发
ios标准页面调用HTML5页面和HTML5调用ios的函数
ios标准页面调用HTML5页面和HTML5调用ios的函数
45 0
|
4月前
|
Web App开发 编解码 JavaScript
Safari浏览器不支持……
Safari浏览器不支持……
|
4月前
|
Web App开发 编解码 JavaScript
Safari浏览器不支持let声明的解决方式
Safari浏览器不支持let声明的解决方式
|
4月前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
168 0
|
4月前
|
Web App开发 前端开发 JavaScript
ios 系统滑动问题
ios 系统滑动问题
37 0
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
589 0
|
Web App开发 JavaScript Android开发
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
418 0

热门文章

最新文章