javascript - CSS 动画在 Chrome (iOS) 上不流畅

Question

我在 iOS 设备上的 Chrome 浏览器上的 CSS 动画有问题。
动画卡入到位并且不流畅。
在 Safari、Firefox 或桌面 Chrome 上一切正常。

这是一个在 iOS 版本的 Chrome 上滞后的简单示例:

.test {
  width: 50px;
  height: 50px;
  background: pink;
  transition: 2s;
}

.test:hover {
  width: 100px;
  height: 100px;
  background: yellow;
  transform: translateX(30px);
}

<div class="test"></div>

Fiddle

有什么办法可以让这样的动画更流畅？

Answer 1

我的动画在 chrome 中不稳定(比如每秒 2 帧)。也许是因为过去修复错误的痛苦经历让我相信它从未如此简单 - 但我花了几分钟才决定在我的 iPhone 上重新启动 Chrome。
我打开了 10 多个标签。一旦我关闭它们并重新启动 Chrome，动画就很好了。
希望这可以帮助某人感觉不那么愚蠢。