Fix for FontAwesome cut off icon in Chrome

I’ve noticed how the antialiasing makes round Font Awesome icons look cut off in Chrome. I dove into solving this with trying out all the tricks in the Chrome inspector.

Issue

tumblr_inline_of12whlv5z1qcmq3u_540

What I noticed was that I could remove this behaviour if I set the transform to scew the icon some degrees (while making the scew not noticable by the human eye). I did this on the :before with the following CSS properties which removed the sub pixel cut off effect.


.icon:before {
	text-rendering: geometricPrecision;
	-webkit-transform: rotateY(0.6deg) rotateY(0.6deg);
	transform: rotateY(0.6deg) rotateX(0.6deg);
}

Result

tumblr_inline_of12wutgbm1qcmq3u_540

Adding text-rendering: geometricPrecision; made the round circle look better. but didn’t solve the issue.