时间戳

首页 > 解决方案 > CSS Animations are not smooth on Chrome (iOS)

javascript - CSS Animations are not smooth on Chrome (iOS)

问题描述

I have a problem with CSS animations on Chrome browser, on iOS device. Animations are snapping into place and are not smooth. On Safari, Firefox or desktop Chrome everything works great.

Here is a simple example which is laggy on iOS version of 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

Is there any way to make such animations more smooth?

标签： javascripthtmlcss

解决方案

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

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

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

推荐阅读