javascript - -webkit translate3d 大元素断断续续

Question

我正在使用 -webkit-transform: translate3d(x,y,z) 和 cubic beizer 计时功能结合 iPhone 的触摸事件来制作自定义滚动方法类型的东西.

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

是否有任何已知的解决方法？

Answer 1

两种可能的解决方法。

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

您可以尝试尽可能多地关闭，然后查看问题是否得到解决。如果是，则将它们一一打开，直到找到问题属性。

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