3

这个问题最初与 FontAwesome 相关，但它是一个一般的 Firefox 问题。

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

这是旋转的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 文件不好）。

有关更多信息，请参阅我的答案

4

1 回答 1

2

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

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

我遇到了 SVG 过滤器 XML url，它对于 Firefox 10+ 和 Firefox 上的 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-spinFontAwesome 使用的类中时，它将适用于每个旋转元素。

jsFiddle

于 2013-10-30T14:02:04.703 回答