（Firefox bug）转换后字体很邋..

Question

这个问题与FontAwesome有点关系，但是一般的火狐问题。

所以我正在使用可以旋转图标的fa-spin类，here你可以找到它的一些例子。

这是旋转的css文件：

// Spinning Icons
// --------------------------

.#{$fa-css-prefix}-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

现在一切都在chrome和IE10上工作正常，但它不在firefox中： jsFiddle。 当你第一次运行它看起来不错时，但尝试与站点交互（例如：滚动或在jsFiddle中再次运行脚本）。动画变得一团糟。我不知道是什么原因导致这种奇怪的行为，希望有人能帮助我。

修改

问题出现在Windows 7 32位和25.0版本的Firefox（无附加组件）上。 但它确实可以在我的家用电脑上运行，它也有Windows 7 32位25.0 firefox。 预览屏幕上的显示方式：
请注意，它适用于前几秒，但在它会变得紧张之后（这种口吃是因为我的.gif很糟糕）。

---

请参阅我的回答以获取更多信息

Answer 1

在您想要添加此“黑客”之前，您应首先尝试更新您的驱动程序

我注意到的是IE和Chrome实际上使文本模糊，FF没有。我想过使用模糊滤镜，但这不起作用。字体宽度也没有保持不变，所以我需要一些东西或提醒客户他的宽度或强制宽度始终是静态的。

我遇到了SVG过滤器XML网址，这对于Firefox 10+和Android上的Firefox来说非常特别。我试着将它应用到我的元素上，我的问题完全消失了！

我确实使用了<feColorMatrix type=saturate values=1/>，所以饱和过滤器没有带走颜色。

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale");

将其添加到FontAwesome使用的.fa-spin类时，它将适用于每个旋转元素。

<强> jsFiddle