title: Webkit-based blurry/distorted text post-animation via translate3d
body: <p>This issue appears to affect all WebKit-based browsers, including the iPhone. </p>
  
  <p>First some background. The site I'm working on uses a JavaScript-based 'slider' animation.</p>
  
  <p>I'm using <code>-webkit-transform: translate3d</code> to 'power' the actual animation. When using this method, as opposed to a JavaScript-based method, the text becomes all blurry once the content has been animated. This is especially noticeable on the iPhone.</p>
  
  <p>A few workarounds I saw were to remove an relative positioning, which I did, and to add a rule for <code>-webkit-font-smoothing: antialiased</code>, which I also did. Neither change made the slightest difference.</p>
  
  <p>The <em>only</em> way I could make this work properly without blurry text was to use regular JavaScript for the animation and bypass the <code>translate3d</code> altogether. I'd prefer to use <code>translate3d</code> because it performs <em>much</em> faster on WebKit-enabled devices, but for the life of me I cannot figure out why it is affecting the text in such a poor way.</p>
  
  <p>Any suggestions or solutions would be greatly appreciated.</p>