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>

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?

• javascript
• html
• css

• 2 not sure if this will make it any smoother but you should try adding more browser support. -o-transform, -moz-transform, -ms-transform, -webkit-transform the webkit transform may be used by chrome, but cannot confirm. – Shawn Pacarar Commented May 15, 2019 at 20:33
• 2 it works fine on my device, it doesnt seem reproducible, have you tested on other devices? – Dev Man Commented May 15, 2019 at 20:33
• 1 furthermore what iphone are you using to test. it is possible it is just slow after hearing @ImmortalDude's response. – Shawn Pacarar Commented May 15, 2019 at 20:34
• 2 Just tested on iPhone 8 Plus running iOS 12.2 with Chrome. Smooth as silk. Not laggy at all. – random_user_name Commented May 15, 2019 at 20:38
• 1 @Knight yes, iPhone 5s, no problems, try using a different browser, it might bechrome not playing nice – Dev Man Commented May 15, 2019 at 20:39

2 Answers 2

My animations were choppy in chrome (like 2 frames per second). Maybe because traumatic experiences with bug fixing in the past has trained me to expect that its never this easy - but it took me a few minutes before I decided to restart Chrome on my iPhone.

I had over 10 tabs open. Once I closed them and restarted Chrome the animation was all good.

Hopefully this helps someone to feel slightly less silly.

The will-change CSS property hints to browsers how an element is expected to change.

https://developer.mozilla/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>