Webkit-based blurry/distorted text post-animation via translate3d
This issue appears to affect all WebKit-based browsers, including the iPhone.
First some background. The site I'm working on uses a JavaScript-based 'slider' animation.
I'm using -webkit-transform: translate3d 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.
A few workarounds I saw were to remove an relative positioning, which I did, and to add a rule for -webkit-font-smoothing: antialiased, which I also did. Neither change made the slightest difference.
The only way I could make this work properly without blurry text was to use regular JavaScript for the animation and bypass the translate3d altogether. I'd prefer to use translate3d because it performs much 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.
Any suggestions or solutions would be greatly appreciated.
Answer
None of these seem to have worked for me but I've found a slightly dirty solution which seemed to do the trick:
top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);