title: Webkit translate3d makes my text blurred
body: <p>After trying all the answers to similar posts on here, I've still had no luck with fixing my problem.</p>
  
  <p>When I use -webkit-transform: translate3d on elements with text, the text blurs quite significantly. I've replicated the problem below via jsfiddle, but only appears if at a certain width (try resizing the browser to see the problem)</p>
  
  <p><a href="http://jsfiddle.net/H4JAM/" rel="nofollow">http://jsfiddle.net/H4JAM/</a></p>
  
  <pre><code>&lt;div class="blur-percentage"&gt;Text with percentage&lt;/div&gt;
  &lt;div class="blur-fixed"&gt;Text with fixed&lt;/div&gt;
  
  .blur-percentage {
      -webkit-transform: translate3d(0%,0,0);
      font-family: Arial;
      width: 50%;
      float: left;
  }
  
  .blur-percentage.move {
      -webkit-transform: translate3d(50%,0,0);
  }
  
  .blur-fixed {
      -webkit-transform: translate3d(0px,0,0);
      font-family: Arial;
      width: 50%;
      float: left;
  }
  
  .blur-fixed.move {
      -webkit-transform: translate3d(200px,0,0);
  }
  
  $('.blur-percentage').on('click' , function() {
      $(this).addClass('move')
  })
  
  $('.blur-fixed').on('click' , function() {
      $(this).addClass('move')
  })
  </code></pre>
  
  <p>Also - a screenshot of the problem..
  <a href="http://i.imgur.com/WPYrWpm.png" rel="nofollow">http://i.imgur.com/WPYrWpm.png</a></p>
  
  <p>It's happening when a percentage is given rather than a fixed number, ie - 50%, not 200px.</p>
  
  <p>Any help would be great!</p>
  
  <p>Thanks</p>