带有大元素的-webkit translate3d卡顿

Question

我正在使用-webkit-transform: translate3d(x,y,z)和立方beizer计时函数结合触摸事件为iPhone制作一个自定义的scrollmethod类型的元素。

问题是，如果元素(在本例中是page div)超过一定的大小，动画就会卡顿(元素停止半秒)。如果我的宽度为320px，高度为1000px，这一切都很好，但如果我将高度设置为2000px，我会出现严重的卡顿。请注意，它只在开始时卡顿一次，几乎就像是在加载，然后就没问题了。

有什么已知的变通方法吗？

Answer 1

两种可能的解决方法。

首先关闭其他CSS属性，即位置(顶部、左侧、右侧、底部)和不透明度。混合使用它们可能会导致性能问题，特别是当它们是动画的时候。

您可以尝试尽可能多地关闭，然后查看问题是否得到修复。如果是，则逐个重新打开它们，直到找到问题属性。

其次，将您的内容包装在iframe中。即使iframe设置为填充视图，当它包含非常大的图像时，它也可以提供显著的性能改进。