title: Blurry text after using CSS transform: scale(); in Chrome
body: <p>Seems like there has been a recent update to Google Chrome that causes blurry text after doing a <code>transform: scale()</code>. Specifically I'm doing this:</p>
  
  <pre class="lang-css prettyprint-override"><code>@-webkit-keyframes bounceIn {
    0% {
      opacity: 0;
      -webkit-transform: scale(.3);
    }
  
    50% {
      opacity: 1;
      -webkit-transform: scale(1.05);
    }
  
    70% {
      -webkit-transform: scale(.9);
    }
  
    100% {
      -webkit-transform: scale(1);
    }
  }
  </code></pre>
  
  <p>If you visit <a href="http://rourkery.com">http://rourkery.com</a> in Chrome, you should see the problem on the main text area. It didn't used to do this and it doesn't seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a similar issue with 3d transforms, but can't find anything about 2d transforms like this.</p>
  
  <p>Any ideas would be appreciated, thanks!</p>