h5页面ios滑动卡顿bug

webJWYC 2017-12-06 10:14:01

在微信h5页面ios滑动会出现卡顿的情况，有大神遇到过这种情况吗？

...全文

1240 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

webJWYC 2017-12-06

打赏
举报

回复

ok，完美解决

qq_24026485 2017-12-06

打赏
举报

回复

加这个属性-webkit-overflow-scrolling: touch;

在我们开发中，H5页面多多少少会在外部打开，比如微信，钉钉，那么就会存在一些意想不到的bug！此次主要针对移动端H5页面在iOS端产生的橡皮回弹（橡皮筋效果）造成滑动卡顿问题做一下相关记录，希望对遇到类似问题的同学有所帮助。

在ios手机滑动卡顿问题！！！ h5页面在安卓手机滑动正常；在ios手机滑动卡顿问题！！！为什么会卡顿？？？最近接触都项目有点多；一时间又忘记记录下自己的bug；原谅不守时，最近做了一个以vue为基础做的web移动端；由于页面篇幅比较多切html中有v-for导致页面比较长；因为不止一个页面相互跳转；而且页面中的信息回显；比如:从a页面跳转到b页面；在由b页面返回到a页面时发现在安卓手机是流程的；而在ios手机上发了bug就是页面卡住了；动不了；后来反复的查阅资料给出的解释很多；其中就有

在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。

解决方式：给滚动的元素加样式：-webkit-overflow-scrolling: touch;-webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹)如果值为auto，就是普通的滚动，手指离开就停止滚动，让人感觉有点卡顿如果设置为touch，在手指离开后还会滚一下，有回弹效果，看上去很流畅但是刚开始用的时候有个小bug，h5页面打包成app时，一开始写成了*{-we...

前几天做完一个调查问卷的页面，客户反馈说果机出现了页面卡顿问题，第一反应是没加下面这行代码： webkit-overflow-scrolling: touch; 这行代码是ios独有的属性，解决页面滑动卡顿好用的一批。但是经过我的排查，用加班时间搞代码，才发现并不是这行代码的锅，对8起，我冤枉你了！经过自己测试发现是点击输入框之后，input失去焦点时让页面的scrollTop为0，造成...

29,027

社区成员

12,466

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章