iOS硬件加速下滑

Question

今天有一个好问题要问你们。我正在为移动设备（特别是 iOS 移动 safari）开发一个下拉滑块。我已经走了很远，但撞到了一堵砖墙。我遇到的问题是（高度/位置/边距）转换在移动设备上不是很平滑。所以我转而使用变换，因为它们在移动设备上非常流畅。

我使用带有子文章的容器。文章在 y 轴上平移 -120%，因此它被容器隐藏溢出隐藏。点按后，文章将返回到其原始位置。

这很有效，除了一件事，当文章被转换 -120% 时容器不会崩溃，导致我的下拉滑块之间出现空白:(

我的问题是，我该如何解决这个问题？

希望大家帮忙！

Answer 1

使用 translate3d 触发硬件加速：

-webkit-transform: translate3d(0,-200%,0);
-webkit-transform: translate3d(0,0,0);

这是强制 iOS 设备使用硬件加速 CSS3 转换的众所周知的技巧。我已经为你更新了你的小提琴（注意：我绑定到桌面浏览器测试的“悬停”事件）。

http://jsfiddle.net/CeyJq/4/