Skip to content

Latest commit

 

History

History
16 lines (12 loc) · 904 Bytes

ios5+-scroll.md

File metadata and controls

16 lines (12 loc) · 904 Bytes

IOS 5+快速回弹滚动问题

问题表现

IOS5新特性webkit-overflow-scrolling: touch可以启动快速回弹滚动(fast bounce-scroll)效果,但是它会阻止渲染直到滚动结束。

===

影响

  1. 从不滚动状态到滚动状态(反之亦然),因为要先初始化滚动状态才开始渲染,虽然很短暂,但也是有delay的,所以出现闪屏(公众号2期课程详情页闪屏问题)
  2. 列表滚动过程中,需要等到滚动结束之后,后面的元素才会渲染出来(公众号2期课程列表页下拉刷新元素出来慢的问题)

===

解决方案

  1. 启动硬件加速,可以用-webkit-transform: translate3d(0,0,0),这个hack可以解决大部分问题
  2. 用min-height,直接杜绝滚动状态改变,从而防止闪屏问题(已解决详情页闪屏问题)

ps: 【[机型兼容][IOS8]闪屏问题】的根本原因