Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

Question

MY ENVIRONMENT (WHERE I GET THE LAG):

Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102 (64-bit)

CODEPEN:

http://codepen.io/vieron/pen/hnEev

ANIMATION:

SITUATION:

I googled this a lot without finding anything that works for me. I know this questions has been asked before.

The CSS3 animation is smooth on my Mac when I open the website with Safari and Firefox, but not with Chrome!

Strangely enough, the original CodePen is smooth on Chrome.

PROBLEM:

Something in my code is causing the animation to be choppy only on Chrome. What is it and how can I fix it ?

WHAT I LOOKED AT:

Chrome CSS 3 Transition Not Smooth

I need my positioning to be relative to adapt to different screen sizes.

CODE:

HTML

<div class="marquee">
    <ul>
        <li>
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
        </li>
        <li>
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
        </li>
        <li>
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
        </li>
    </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
@-webkit-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
@-moz-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
@-ms-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
@keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
.cssanimations .marquee {
  position: relative;
  width: 90%;
  margin: auto;
  overflow: hidden;
}
.cssanimations .marquee > ul {
  list-style: none;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 300% !important;
  height: 80px;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: loop 20s linear infinite;
  -moz-animation: loop 20s linear infinite;
  -o-animation: loop 20s linear infinite;
  animation: loop 20s linear infinite;
}
.cssanimations .marquee > ul > li {
  white-space: normal;
  position: relative;
  text-align: justify;
  text-justify: distribute-all-lines;
  line-height: 0;
  letter-spacing: -0.31em;
  float: left;
  width: 33.333333%;
  overflow: hidden;
  height: 80px;
}
.cssanimations .marquee > ul > li:before {
  content: '';
  position: relative;
  height: 100%;
  width: 0;
}
.cssanimations .marquee > ul > li:before,
.cssanimations .marquee > ul > li > * {
  vertical-align: middle;
  display: inline-block;
}
.cssanimations .marquee > ul > li:after {
  content: '.';
  display: inline-block;
  height: 0 !important;
  width: 100%;
  overflow: hidden !important;
  visibility: hidden;
  font-size: 0;
  word-spacing: 100%;
}
.cssanimations .marquee > ul > li > * {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  line-height: 1;
  letter-spacing: 0;
}
.cssanimations .marquee > ul > li img {
  margin: 0 1.6%;
}


.marquee ul li a{
    display: inline-block; 
    height: 80%;
}

.marquee ul li a img {
    max-height: 100%;
}

JS LINKS IN THE HTML

<script src="Vendors/js/modernizr.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

IMPORTANT N.B.:

Only thing I added to the CodePen:

.marquee ul li a{
    display: inline-block; 
    height: 80%;
}

.marquee ul li a img {
    max-height: 100%;
}

Removing this doesn't solve the issue.

EDIT 1:

Google Chrome Profiler (option 1):

Google Chrome Profiler (option 2 (Snapshot)):

EDIT 2:

CSS3 transition not smooth in Chrome

I seem to have just found a strange behaviour in my animation. It "grows" (gets larger) every time I move out of sight and back on it by scrolling.

This behaviour seems to be what is described in the answer to the question above. But specifying a fixed width like suggested didn't fix the lag.

EDIT 3:

Google Timeline (after removing gravity.js):

EDIT 4:

This is weird. After commenting and uncommenting some lines (basically going back to what the code was when there was lag), the animation performance became better. Not as smooth as in Safari or Firefox, but still smoother.

EDIT 5:

I found the "culprit".

I am using another codepen in my website's header :

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
  %span
    PURE CSS
  %br
  %span
    PARALLAX PIXEL STARS

Removing it makes the other animation smooth.

NONETHELESS:

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

Is Chrome less powerful ?

I filed a report to Chrome and hope they will answer here but there is no guarantee.

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

UPDATE 6:

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

Suggestion: add a demo that reproduces the problem (including the markup) and remove the [javascript] and [jquery] tags unless they are related to the question. — Tim M., Jun 04 '16 at 12:02
*"Strangely enough, the Codepen works smooth even with Chrome."* - That suggests a difference between the actual site and the codepen. Keep adding parts of the site to the codepen until you've reproduced the problem, and you've likely found the cause. — GolezTrol, Jun 04 '16 at 12:45
@GolezTrol Indeed ! But I only added very few lines of code and removing them didn't change anything :( — Coder1000, Jun 04 '16 at 13:35
@TimMedora I included the HTML now, thx for the suggestion ! — Coder1000, Jun 04 '16 at 13:42
Have you tried looking in the console at the profiler? You should check what memory is being allocated to the heap when you are triggering the animation. If it runs smoothly in Codepen then it will be something on your site — Halfpint, Jun 04 '16 at 14:11
@Alex Forgive my ignorance, but what is the console in the profiler ? (I am using Brackets) — Coder1000, Jun 04 '16 at 14:13
@Coder1000 when you run your code in Chrome, right click and inspect and then go to profiles and start recording a Heap Allocation, or a CPU profile and analyse which code paths are blocking the event queue whilst your animation runs — Halfpint, Jun 04 '16 at 14:18
@Alex There is a "Profiles" tab (not "Profiler") with 3 options, which should I pick ? — Coder1000, Jun 04 '16 at 14:21
So from the profile, it looks like gravity.js is causing your problems, it looks to be preiodically blocking the event queue 40-160ms, this is a small execution quantum, but could be whats causing the defects in your animation. Try disabling the script and see if it yields the same "lag" in chrome. I can't see gravity.js in your code pen so can only assume that is the root of the problem — Halfpint, Jun 04 '16 at 14:33
Smooth for me, on Chrome. Please post some code so we can reproduce the issue. — Sergiu Paraschiv, Jun 04 '16 at 14:34
@Alex I commented out the link to gravity.js so it's not called. Didn't change the "lag" :/ What is really so weird, is that everything works perfectly fine in other browsers (no lag at all). — Coder1000, Jun 04 '16 at 14:36
Whatever is causing your issue is missing. What you posted is not enough for us to reproduce the issue. — Sergiu Paraschiv, Jun 04 '16 at 14:36
No, Windows. That's one piece of missing information from your question. What version of Chrome, what OS and what OS version. — Sergiu Paraschiv, Jun 04 '16 at 14:38
@SergiuParaschiv Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102 (64-bit) — Coder1000, Jun 04 '16 at 14:39
I can confirm I am running the same version of El Capitan and Chrome — Halfpint, Jun 04 '16 at 14:40
@Alex Great ! The codepen is also smooth on my side. But not on my website :/ — Coder1000, Jun 04 '16 at 14:41
Im still having suspicions about gravity.js. Do you have a link to the production site? or are you testing locally — Halfpint, Jun 04 '16 at 14:41
@Alex How could it be that when I just removed gravity.js and it didn't change anything ? — Coder1000, Jun 04 '16 at 14:43
The CPU snapshot suggests its hogging the event queue for enough time to cause defects in the animation and its the only obvious inconsistency between Codepen and the code you posted. — Halfpint, Jun 04 '16 at 14:44
Try commeting out `transform: translate3d(0, 0, 0)` hack and replacing it with `will-change: transform` or removing it altogether in case you are creating too many layers with other parts of your CSS. — Teo Dragovic, Jun 04 '16 at 14:44
@Alex I checked again the CPU test after removing the gravity.js. It is no longer listed at all in the test but the lag isn't resolved for my animation. — Coder1000, Jun 04 '16 at 14:54
@Coder1000 Sorry, that was all I could think of besides JS blocking and seeing your actual site. Try recording your timeline and post data here (instructions at the bottom of this article: https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=en) — Teo Dragovic, Jun 04 '16 at 14:56
Wow, nice piece of code, so Safari and Firefox work well? This happened only to Chrome if I've understand.. — Alessandro Ornano, Jun 06 '16 at 09:10
Cannot reproduce this on Windows with either 53.0.2760.0 (Official Build) canary (64-bit) or 50.0.2661.102 (Official Build) m (32-bit). Particular to Chrome on Mac OSX, I guess... — canon, Jun 06 '16 at 18:02
So, chrome on Mac is where the issue lies? I'll have a look when I am on my Mac at home. Works fine on Win 10, Chrome v. 50.0.2661.102 m as well. — JakobMiller, Jun 07 '16 at 08:48
Is it just as choppy if you close Chrome's Developer tools? I've found just having them open can cause noticeable performance degradation in some cases. — Nate Whittaker, Jun 09 '16 at 02:53
Cannot reproduce, please share the actual broken code sample. — zrooda, Jun 10 '16 at 14:44
What not use absolute positioning with @media for different screen sizes? — HenryM, Jun 12 '16 at 07:35
@HenryM How would that help when everything is smooth on browsers other than chrome ? — Coder1000, Jun 12 '16 at 09:00
@Coder1000 evidently it works for all other browsers and not Chrome so whatever you're doing you're doing specifically for Chrome. You've researched the other similar posts and they've said Chrome needs it to be absolute. It seems to me your choices are (1) get Google to fix Chrome or (2) use a solution that will work with Chrome or (3) accept it will not be smooth with Chrome. You now absolute positioning will work you just don't want to use it. — HenryM, Jun 12 '16 at 10:34
@HenryM I agree with your analysis. In fact, that's what I thought from the beginning but I was hoping someone would provide an alternative. Please post this as an answer so the bounty isn't wasted :) I am going to try to contact Google (if you can provide a link to the correct contact info, I will accept your answer). — Coder1000, Jun 12 '16 at 11:55
I checked your code and placed it inside a `` tag and it was working perfect and was smooth in Chrome..! You may be having problem with your Chrome try to check and assign high priority to your Chrome in Task Manager..! — Umair Shah, Jun 12 '16 at 12:13
@UmairShahYousafzai Are you on a Mac ? The issue seems to be only on Chrome OS X :( — Coder1000, Jun 12 '16 at 12:21
@Coder1000 : Well..Not really I use Windows Operating System..! Make sure to check on another Chrome OS X to confirm it too..! — Umair Shah, Jun 12 '16 at 12:24
@Coder1000 God damn it. I completely forgot about this. I'll bookmark this and try tonight! Sorry!! — JakobMiller, Jun 13 '16 at 06:29
I'm on win7 with firefox and it is not running smoothly. Guess its not a chrome bug. — SeRu, Jun 13 '16 at 14:34
@SeRu Weird, it's smooth on firefox and safari for me, but not chrome. — Coder1000, Jun 13 '16 at 14:37
@Coder1000 i just checked, it runs smooth on my chrome, IE, firefox delevoper but not my default firefox. In Firefox it stucks a lot and suddenly moves faster as well. — SeRu, Jun 13 '16 at 14:40
@Coder1000 Using your provided samples and code. None of it shows any problems or slowdowns on my end. — zrooda, Jun 13 '16 at 14:56
@mystrdat Chrome OSX El Capitan ? (Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102 (64-bit)) — Coder1000, Jun 13 '16 at 14:57
@mystrdat Ok, good. This had already been confirmed to be working on Windows, but not on Linux :) Thank you for the feedback ! If someone gets it to work on Mac OSX Chrome El Capitan, then this would be the answer to my question. — Coder1000, Jun 13 '16 at 15:00
@Coder1000 So I've got my colleague to test this on OSX El Capitan in Chrome, no issues on his end either with the codepen sample. — zrooda, Jun 13 '16 at 15:05
@mystrdat Did he use the code I posted or did he click on the codepen link ? — Coder1000, Jun 13 '16 at 15:06
@mystrdat Yes, as I wrote in my question, the codepen link is also smooth for me. But not when implemented in my website with the code I provided. — Coder1000, Jun 13 '16 at 15:10
@Coder1000 That's what I'm getting at - there doesn't seem to be any problem with the sample itself, it's very probably some other code in your project. Without seeing it however it's close to impossible to debug the real issue aside from just guessing. I can imagine quite a few reasons why the animation _could be_ slow in specific layouts, but it isn't the case with the sample. — zrooda, Jun 13 '16 at 15:14
@mystrdat I am trying to isolate this atm. I hope to be back with some feedback soon. — Coder1000, Jun 13 '16 at 15:21
@mystrdat I edited my answer to my question. But it doesn't fully resolve the case. It seems Chrome is less powerful than other navigators on OSX El Capitan. — Coder1000, Jun 13 '16 at 15:43
have you ruled out cache-related issue or does it render any differently on a live server? — SML, Jun 13 '16 at 17:10
@SML I haven't put it on a live server yet (it's not finished), but I already tried deleting all cache once, didn't change anything :( — Coder1000, Jun 13 '16 at 17:15
1) Try uploading your sample code to a test site, just so to rule out it is not something specific to your local environment 2) Try running it on Opera for Mac as it uses the same rendering engine (BLINK) as Chrome, if the same issue occurs on Opera than it is most likely a rendering engine related problem which you can report. If I am not mistaken Firebox uses Webkit which is the same as Safari. — SML, Jun 13 '16 at 17:37
@SML Tried on Opera. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine ! — Coder1000, Jun 13 '16 at 17:41
there is a bug reporting link on the Chromium Projects site, you can try there — SML, Jun 13 '16 at 17:43
@SML But if everyone here submits a bug report with a link to this question, it is more likely to get an answer from google. — Coder1000, Jun 13 '16 at 17:46
The thing is, it works fine for you in Chrome when you tested it on CodePen, I think you should try to put a test page on a live server, after all you have tried so many ways to debug, why not rule this one out first. — SML, Jun 13 '16 at 17:51
If you have a live page with just the code that you have on codepen (so to isolate out other codes you have in your project), you can get more people to test for you and to ensure that the issue can be replicated under the same OS and Browser version. If so, you can then get people to submit bug report in numbers. — SML, Jun 13 '16 at 18:02
any free hosting that takes a minute to sign up would do to job, since it is just CSS/HTML/JS — SML, Jun 13 '16 at 18:16
It is just for testing/debugging purpose, you don't need it to be reliable so to speak. Try https://www.000webhost.com/ or http://www.freewebhostingarea.com/ — SML, Jun 13 '16 at 18:24
@Coder1000 It was actually as smooth as on my PC with my mac on chrome. — JakobMiller, Jun 14 '16 at 16:08
@JakobMillah Thx ! Still, I am waiting for google chrome to answer this -_- — Coder1000, Jun 15 '16 at 13:43
@Coder1000 Actually I was playing around on the crossbrowsertesting site, I remember your case, I tested your codepen and found that the pixel star code has lag with Mac OSX 10.11 + Safari 9 too. It used the tool to make a video https://app.crossbrowsertesting.com/livetests/5282961/videos/z901bf61d81b54edc1df — SML, Jun 15 '16 at 14:11
@Coder1000 you can go to the site and test with all different kind of combinations. Yet you had a few respondents who reported that they experienced no lag with the same OSX and browser as you do when they view your page on codepen. I am now inclining to think the problem is machine dependent (not only in the sense of OS and browser combination). — SML, Jun 15 '16 at 14:15
@SML Did you check update 5 ? The codepen is also smooth on my side. It's only when I have both that the banner codepen becomes laggy. On firefox, and safari I can have both and it's smooth. On Opera and Chrome, it's laggy. Did you try with both codepens ? To my knowledge, no one here has yet :/ I heard your suggestion about putting an example online, but I think anyone with a bit of web knowledge can copy paste the code and test it if wanted. — Coder1000, Jun 15 '16 at 14:30
What about when you put both in the same script, do you experience the same lag? How about playing around with embedding method HTML vs iFrame — SML, Jun 15 '16 at 14:37
I think you might be looking at a multiple key frames type of issue — SML, Jun 15 '16 at 14:38
by the way, you can put your code in the snippet, it should be easier if you want people to test and report on lag. — SML, Jun 15 '16 at 15:45
@Coder1000 I used my colleague's mac to test (El Capitan+latest version of Chrome). Had no lag with either codepen. Do you have a page that you combine the two? — SML, Jun 21 '16 at 00:04

score 16 · Answer 1 · answered Jun 22 '16 at 20:53

Chrome supports hardware acceleration when rendering, improving performance for css3 animations. You can trigger hardware acceleration by applying translateZ(0), rotateZ(360deg) or similar which tricks Chrome into it.

Once you're using hardware acceleration by applying the trick above (or if you were already using it, but the cited code sample was incomplete and/or a third party library was taking care of it for you), you can further improve performance by applying, with prefixes as needed:

backface-visibility: hidden;
perspective: 1000;

This also helps address some issues when the GPU is integrated and/or being throttled (think power-saving mode), and its performance degrades. This would explain issues with parallax performance on a macbook! ¯\_(ツ)_/¯

Did not change nothing for me.. however animations are super smooth in Safari :| — Alexandre Daubricourt, May 07 '20 at 10:50

score 7 · Answer 2 · answered Jun 22 '16 at 11:07

7

To make animations better you can use will-change property of CSS. This property hints the browser that the element is going to change.

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

You can read here more about will-change.

answered Jun 22 '16 at 11:07

Saiyam Gambhir

536
3
16

score 2 · Answer 3 · edited Jun 12 '16 at 12:33

2

SOLUTION:

Use absolute positioning with @media for different screen sizes.

EXPLANATION:

It works for all other browsers and not Chrome so whatever you do will be specifically for Chrome.

This gives you 3 options:

(1) get Google to fix Chrome or
(2) use a solution that will work with Chrome or
(3) accept it will not be smooth with Chrome.

TL;DR:

You know absolute positioning will work.

edited Jun 12 '16 at 12:33

Coder1000

4,071
9
35
84

answered Jun 12 '16 at 12:02

HenryM

5,557
7
49
105

1

I don't want to use absolute positioning but thx for your answer. – Coder1000 Jun 16 '16 at 12:14

Coder1000 · Accepted Answer · 2016-06-13T17:42:25.483

I found the "culprit".

I am using another codepen in my website's header :

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
  %span
    PURE CSS
  %br
  %span
    PARALLAX PIXEL STARS

Removing it makes the other animation smooth.

NONETHELESS:

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

Is Chrome less powerful ?

I filed a report to Chrome and hope they will answer here but there is no guarantee.

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

UPDATE 6:

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

@JonSkeet Could you please forward this to the Chrome team (if you can) ? That would be really great :D — Coder1000, Jun 13 '16 at 16:01

score 1 · Answer 5 · answered Oct 01 '20 at 16:15

I recently updated my Nvidia GPU driver and animations in Chrome became choppy, even though hardware acceleration was turned on.

What worked for me was reactivating hardware acceleration.

Google Chrome > Settings > Advanced > System > Use hardware acceleration when available

To reactivate the broken link, I turned off hardware acceleration, relaunched the browser. Here I noticed that animations were just at choppy as before. Then I turned on hardware acceleration again, relaunched the browser and hardware acceleration had been obviously reactivated once again as animations were now super smooth.

I assume updating the graphics driver broke Chrome's link to hardware acceleration and it simply needed to be reactivated.

score 0 · Answer 6 · answered Jan 14 '21 at 05:41

0

Try to disable your Chrome extensions (it had been the issue for me)

go to Chrome\Manage Extensions switch the toggle button to disable them, if it worked fine, then try to enable one by one, to know which exactly caused the problem.

answered Jan 14 '21 at 05:41

Al1

308
3
9

score 0 · Answer 7 · answered May 18 '22 at 22:25

I had exactly the same problem with my Linux pc with NViDIA card. After setting to NVIDIA on demand and rebooting it was solved. Strange thing is that the it is set again to performance mode. I guess the problem was with the card setting and not chrome.

score 0 · Answer 8 · answered Jan 23 '23 at 15:25

I know this is old, but if anyone should still stumble accross this post.

I also had the problem that my animations were smooth in Safari on iOS, but choppy in Google Chrome on iOS.

I fixed it with these lines of code:

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

I got the code from here.

Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

8 Answers8