CSS3 Transition Font Aliasing
Quick Summary If you’ve tried to apply some CSS3 Transitions to your web designs, you may notice some weird front aliasing. After a quick Google search for CSS3 Transition Font Aliasing, I noticed this was a problem in webkit browsers.
If you’ve tried to apply some CSS3 Transitions to your web designs, you may notice some weird front aliasing. After a quick Google search for CSS3 Transition Font Aliasing, I noticed this was a problem in webkit browsers.
In my case, I was applying a CSS3 transform to rotate an SVG graphic on rollover. Every time the graphic was transformed, the fonts on the page became thin and blurry during the transition. Very odd…
Even more odd, this strange aliasing was not a problem when writing the markup locally. But only after I started to implement the design into WordPress. Both were being viewed locally on my own device. So I can’t find out where the bug lies.
Here is a quick fix. Not sure WHY it works..but it works. You can apply the following to the affected elements. If you have some text in a div, you can just apply it to the entire div.
Fix CSS3 Transition Font Aliasing
-webkit-transform-style: preserve-3d;
If anyone has any news on this, or a better fix, please let me know in the comments section.
Thanks!
