css - (Firefox 错误)转换时字体草率

Question

这个问题最初与 FontAwesome 有关，但它是一个普遍的 firefox 问题。

所以我正在使用类 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(无附加组件)上。 然而，它确实适用于我的家用 PC，它还装有 Windows 7 32 位 25.0 firefox。 预览它在我的屏幕上的样子:
请注意，它在前几秒钟有效，但之后会变得紧张(这种断断续续是因为我的 .gif 很糟糕)。

---

更多信息请看我的回答

Answer 1

在你想添加这个“hack”之前，你应该先尝试更新你的驱动程序

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

我遇到了 SVG 过滤器 XML url，它专用于 Firefox 10+ 和 Firefox on android。我尝试将其应用于我的元素，我的问题完全消失了!

我确实用过<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");

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

jsFiddle