title: Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
body: <p><strong>MY ENVIRONMENT (WHERE I GET THE LAG):</strong></p>
  
  <p>Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102 (64-bit)</p>
  
  <p><strong>CODEPEN:</strong></p>
  
  <p><a href="http://codepen.io/vieron/pen/hnEev" rel="noreferrer">http://codepen.io/vieron/pen/hnEev</a></p>
  
  <hr>
  
  <p><strong>ANIMATION:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/J2ZoE.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/J2ZoE.gif" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>SITUATION:</strong></p>
  
  <p>I googled this a lot without finding anything that works for me. I know this questions has been asked before.</p>
  
  <p>The CSS3 animation is smooth on my Mac when I open the website with Safari and Firefox, but not with Chrome!</p>
  
  <p>Strangely enough, the original CodePen is smooth on Chrome.</p>
  
  <hr>
  
  <p><strong>PROBLEM:</strong></p>
  
  <p>Something in my code is causing the animation to be choppy only on Chrome. What is it and how can I fix it ?</p>
  
  <hr>
  
  <p><strong>WHAT I LOOKED AT:</strong></p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/17754561/chrome-css-3-transition-not-smooth">Chrome CSS 3 Transition Not Smooth</a></li>
  </ul>
  
  <p>I need my positioning to be relative to adapt to different screen sizes.</p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/14418359/css3-transition-not-smooth-in-chrome">CSS3 transition not smooth in Chrome</a></p></li>
  <li><p><a href="http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser" rel="noreferrer">http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser</a></p></li>
  <li><p><a href="https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/" rel="noreferrer">https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/</a></p></li>
  <li><p><a href="http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser" rel="noreferrer">http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser</a></p></li>
  </ul>
  
  <hr>
  
  <p><strong>CODE:</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="marquee"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
              &lt;a href="https://developer.apple.com/swift/"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /&gt;&lt;/a&gt;
              &lt;a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"&gt;&lt;img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /&gt;&lt;/a&gt; 
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
    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 &gt; 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 &gt; ul &gt; 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 &gt; ul &gt; li:before {
    content: '';
    position: relative;
    height: 100%;
    width: 0;
  }
  .cssanimations .marquee &gt; ul &gt; li:before,
  .cssanimations .marquee &gt; ul &gt; li &gt; * {
    vertical-align: middle;
    display: inline-block;
  }
  .cssanimations .marquee &gt; ul &gt; li:after {
    content: '.';
    display: inline-block;
    height: 0 !important;
    width: 100%;
    overflow: hidden !important;
    visibility: hidden;
    font-size: 0;
    word-spacing: 100%;
  }
  .cssanimations .marquee &gt; ul &gt; li &gt; * {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    line-height: 1;
    letter-spacing: 0;
  }
  .cssanimations .marquee &gt; ul &gt; li img {
    margin: 0 1.6%;
  }
  
  
  .marquee ul li a{
      display: inline-block; 
      height: 80%;
  }
  
  .marquee ul li a img {
      max-height: 100%;
  }
  </code></pre>
  
  <p>JS LINKS IN THE HTML</p>
  
  <pre><code>&lt;script src="Vendors/js/modernizr.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>IMPORTANT N.B.:</strong></p>
  
  <p>Only thing I added to the CodePen:</p>
  
  <pre><code>.marquee ul li a{
      display: inline-block; 
      height: 80%;
  }
  
  .marquee ul li a img {
      max-height: 100%;
  }
  </code></pre>
  
  <p>Removing this doesn't solve the issue.</p>
  
  <hr>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>Google Chrome Profiler (option 1):</p>
  
  <p><a href="https://i.stack.imgur.com/WCpqX.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/WCpqX.gif" alt="enter image description here"></a></p>
  
  <p>Google Chrome Profiler (option 2 (Snapshot)):</p>
  
  <p><a href="https://i.stack.imgur.com/q4pjj.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/q4pjj.gif" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/14418359/css3-transition-not-smooth-in-chrome">CSS3 transition not smooth in Chrome</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>EDIT 3:</strong></p>
  
  <p>Google Timeline (after removing gravity.js):</p>
  
  <p><a href="https://i.stack.imgur.com/lTLfc.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/lTLfc.gif" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 4:</strong></p>
  
  <p>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.</p>
  
  <p><strong>EDIT 5:</strong></p>
  
  <p>I found the "culprit".</p>
  
  <p>I am using another codepen in my website's header :</p>
  
  <p><a href="https://codepen.io/saransh/pen/BKJun" rel="noreferrer">https://codepen.io/saransh/pen/BKJun</a></p>
  
  <pre><code>&lt;link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'&gt;
  #stars
  #stars2
  #stars3
  #title
    %span
      PURE CSS
    %br
    %span
      PARALLAX PIXEL STARS
  </code></pre>
  
  <p>Removing it makes the other animation smooth.</p>
  
  <hr>
  
  <p><strong>NONETHELESS:</strong></p>
  
  <p>This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.</p>
  
  <p>Is Chrome less powerful ?</p>
  
  <p>I filed a report to Chrome and hope they will answer here but there is no guarantee.</p>
  
  <p>If someone can get an answer from Google / Chrome on this, I award him/her the bounty.</p>
  
  <hr>
  
  <p><strong>UPDATE 6:</strong></p>
  
  <p>Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !</p>