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


相关文章
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
706 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
11月前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
768 0
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
996 0
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
1036 4
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 18.4 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 18.4 - macOS 专属浏览器 (独立安装包下载)
859 3
Apple Safari 18.4 - macOS 专属浏览器 (独立安装包下载)
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
805 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
973 1
 H5微信外支付(移动端浏览器)
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
836 0
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
399 0
|
移动开发 iOS开发 Perl
iOS客户端和h5页面的互相调用,服务器和客户端间通信方式
iOS客户端和h5页面的互相调用,服务器和客户端间通信方式
648 0