title: Jerky CSS transform transition in Chrome
body: <p>I am using CSS3 transform on a background image to enlarge on hover. </p>
  
  <p>I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky. </p>
  
  <p>Heres is the link, hover over the social icons to see what I mean.. <a href="http://www.media-flare.com/pins/" rel="noreferrer">http://www.media-flare.com/pins/</a> - I have noticed as you resize the browser down to mobile view, it gets worse. </p>
  
  <p>I have done a jsfiddle version here and slowed down the transition as it is harder to see.</p>
  
  <p><a href="http://jsfiddle.net/wsgfz/1/" rel="noreferrer">http://jsfiddle.net/wsgfz/1/</a> - This seems jerky in chrome and firefox, smooth in safari and opera.</p>
  
  <p>Is there anything I can do to make the transition smoother?</p>
  
  <p>Here is the code if you cannot view jsfiddle</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.social {
     position: relative;
     list-style:none;
  }
  
  .social &gt; li &gt; a {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     color: transparent;
  }
  
  .social &gt; li &gt; a {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     color: transparent;
  }
  
  .fbook, .twit, .tmblr, .pntrst, .insta {
     background: url(http://placehold.it/350x150) center center;
     width: 78px;
     height: 90px;
     background-size: cover;
     float: left;
     margin: 30px;
     -webkit-transition: all 0.8s ease;
     -moz-transition: all 0.8s ease;
     transition: all 0.8s ease;
   }
  
   .fbook {background-position: 0 0}
   .twit {background-position: -78px 0}
   .tmblr {background-position: -156px 0}
   .pntrst {background-position: -232px 0}
   .insta {background-position: -310px 0}
  
  .fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      transform: scale(1.5);
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="social"&gt;
    &lt;li&gt;&lt;a href="" class="fbook"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" class="twit"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" class="tmblr"&gt;Tumbler&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" class="pntrst"&gt;Pinterest&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" class="insta"&gt;Instagram&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" class="rss"&gt;RSS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>