-Webkit翻译3d口吃与大元素

-webkit translate3d stutters with large elements

本文关键字：元素翻译 3d -Webkit 更新时间：2023-09-26

我正在使用-webkit-transform: translate3d(x,y,z)和三次贝泽定时功能与iPhone的触摸事件相结合来制作元素动画，以制作自定义滚动方法类型的东西。

问题是，如果元素（在本例中为 pagediv）超过一定大小，动画就会卡顿（元素停止半秒钟）。如果我的宽度为 320px，高度为 1000px，这一切都很好，但如果我将高度设为 2000px，我会得到一个令人讨厌的口吃。请注意，它一开始只卡顿一次，几乎就像它正在加载然后就没事了。

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

两种可能的解决方法。

首先关闭其他 CSS 属性，即位置（上、左、右、下）和不透明度。混合它们（尤其是动画时）可能会导致性能问题。

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

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