iOS硬件加速下滑

时间:2011-08-01 15:45:18

标签: css ios mobile safari

今天为你们提出了一个很好的问题。我正在研究移动设备的下拉滑块(特别是iOS移动游侠)。我已经走得很远,但撞到了一堵砖墙。我遇到的问题是(高度/位置/边距)过渡在移动设备上不是很平滑。因此,我已经切换到使用转换,因为它们在移动设备上非常流畅。

我使用带有儿童用品的容器。该文章在y轴上被翻译为-120%,因此被隐藏的容器隐藏溢出。点击后,文章将返回其原始位置。

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

我的问题是,我该如何解决这个问题?

希望你们能帮忙!

1 个答案:

答案 0 :(得分:1)

使用translate3d触发硬件加速:

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

这是迫使iOS设备使用硬件加速CSS3转换的众所周知的技巧。我已经为你更新了你的小提琴(注意:我已经绑定到'hover'事件进行桌面浏览器测试)。

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

相关问题