webview - 如何减少在 Android WebView 中启动 CSS 动画/过渡的延迟？

Question

我正在尝试在 Android WebView 中使用 CSS3 动画，但是在启动动画时遇到了非常烦人的延迟(大约 500 毫秒)。

动画运行流畅，没有延迟，但启动时有延迟。由于没有延迟，我认为这不是性能问题。或者它可能是？

这不是默认的 300 毫秒 onclick 延迟，我已经更改为 ontouchstart 并且当我执行动画/转换以外的任何其他操作时，没有延迟。只有这两个。

它也不是 animation-delay 属性，我已经将它设置为 0。

任何可能的解释/解决方案？

PS:我试图运行的动画/过渡是 transform: translateX()属性(property)。之前，我尝试使用 left: Xpx ，但它在动画过程中滞后。使用转换，没有滞后，但有延迟。

Answer 1

我遇到了同样的问题，未能找到合理的解决方案。我尝试了不同的方法，这些是我的结论:

延长动画时间让它看起来更流畅，但不会减少开始时的延迟

关闭硬件加速使动画更快(延迟也减少)但一些帧被丢弃并且动画不再流畅

全部更改 translate3d至 translateX/translateY/translateZ - 无视觉差异

将动画更改为通过 JavaScript 控制的多个转换(transitionEnd 事件)会使其速度变慢，并且途中会出现多次打嗝(每次 transitionEnd 被触发时)。

我的猜测是 CSS 动画在 Android 上很慢，需要一些预先计算才能显示它们；因此在开始的延迟。我们可能需要等待 Chrome 成为 Android 的默认浏览器。