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

【问题标题】：CSS Animations are not smooth on Chrome (iOS)CSS 动画在 Chrome (iOS) 上不流畅
【发布时间】：2019-10-03 01:26:56
【问题描述】：

我在 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);
}

&lt;div class="test"&gt;&lt;/div&gt;

Fiddle

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

【问题讨论】：

不确定这是否会使其更流畅，但您应该尝试添加更多浏览器支持。 -o-transform, -moz-transform, -ms-transform, -webkit-transform webkit 转换可能被chrome使用，但无法确认。
它在我的设备上运行良好，似乎无法重现，你在其他设备上测试过吗？
进一步你用什么iphone来测试。听到@ImmortalDude 的回复后，可能只是慢了。
刚刚在运行 iOS 12.2 和 Chrome 的 iPhone 8 Plus 上进行了测试。光滑如丝。一点也不迟钝。
@Knight 是的，iPhone 5s，没问题，尝试使用其他浏览器，它可能是 Chrome 播放不好

标签： javascript html css

【解决方案1】：

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

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

希望这可以帮助某人不那么傻。

【讨论】：

【解决方案2】：

will-change CSS 属性向浏览器提示元素应该如何改变。

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

&lt;div class="test"&gt;&lt;/div&gt;

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

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

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：