css - iOS硬件加速下滑

Question

今天有一个很好的问题要问你们。我正在为移动设备(特别是 iOS 移动 safari)开发下拉 slider 。我已经走得很远了，但是碰壁了。我遇到的问题是(高度/位置/边距)过渡在移动设备上不是很流畅。所以我转而使用变换，因为它们在移动设备上非常流畅。

我使用一个带有子文章的容器。文章在 y 轴上翻译为 -120%，因此它被容器 overflow hidden 隐藏了。点击后，文章将返回到其原始位置。

除了一件事，这很好用，当文章转换时容器不会折叠 -120% 导致我的下拉 slider 之间出现空白 :(

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

希望大家帮帮忙!

Answer 1

使用translate3d触发硬件加速:

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

这是强制 iOS 设备使用硬件加速 CSS3 转换的众所周知的技巧。我已经为您更新了您的 fiddle (注意:我绑定(bind)到桌面浏览器测试的“悬停”事件)。

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