Why does fa-rotate-90 icons appear blurry in Chrome?

css, font-awesome, google-chrome, html, twitter-bootstrap

Solution

The font-awesome CSS define a CSS rule that causes this issue.

.fa {
    line-height: 1;
}

After removing this rule, the icon display very well.

Problem

This image is a screenshot from Font Awesome examples On my screen (and I even rotated in Paint to make sure it really was blurry and not just some magic) the 90 and 270 degree rotations appear blurry. The vertical and horizontal flips are fine. My question is why? What is it about either Chrome, or the Font Awesome mechanism that causes this to happen? Naturally, thing are much worse in IE 9

Original source