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

Question

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

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

小提琴<\/a>

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

Answer 1

will-change CSS 属性向浏览器提示一个元素将如何改变。

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

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

 .test { width: 50px; height: 50px; background: pink; transition: 2s; } .test:hover { width: 100px; height: 100px; background: yellow; will-change: transform; transform: translateX(30px); }

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

Answer 2

我的动画在 chrome 中不稳定（比如每秒 2 帧）。 也许是因为过去修复错误的痛苦经历让我相信它从未如此简单 - 但我花了几分钟才决定在我的 iPhone 上重新启动 Chrome。

我打开了 10 多个标签。 一旦我关闭它们并重新启动 Chrome，动画就很好了。

希望这可以帮助某人感觉不那么愚蠢。