iOS 页面滑动卡顿且内容显示不全,如何优化?

作者站长头像
站长
· 阅读数 14

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

iOS 页面滑动卡顿且内容显示不全,如何优化?

改如何解决?

回复
1个回答
avatar
test
2024-06-18

我看了一下,出现这个问题的原因分析应该是因为,微信浏览器的内核,Android 上面是使用自带的WebKit 内核,iOS 里面由于苹果的原因,使用了自带的Safari内核,Safari 对于 overflow-scrolling 用了原生控件来实现。对于有 -webkit-overflow-scrolling 的网页,会创建一个 UIScrollView,提供子 layer 给渲染模块使用。

其实解决方案很简单,只需要在公共样式加入下面这行代码:

*{
-webkit-overflow-scrolling: touch;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容