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.
Question&Answers:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…