(Firefox 错误) 转换时字体马虎答案

【问题标题】：(Firefox bug) Font is sloppy when transformed(Firefox 错误) 转换时字体马虎
【发布时间】：2013-11-08 18:31:53
【问题描述】：

这个问题最初与 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 文件不好）。

更多信息请查看我的回答

【问题讨论】：

关键帧以 359 度而不是 360 度结束的任何原因？
这是一个长镜头，但您可以尝试像这样编写关键帧：@-webkit-keyframes spin { from { code goes here } to { code goes here } }
@Josh 这是来自 FontAwesome 的默认代码。 360和359我没看出有太大区别，所以没必要修改。 'from - to' 的行为与 '0% - 100%' 相同，尝试过 :)
嗯，我只是在抛出一些激进的想法哈。我遇到的问题是我在 IE、Firefox 或 Chrome 中看不到任何故障或跳跃动画。您使用的是什么操作系统？
Windows 7 32 位。即使在jsFiddle中滚动（例如：在css框中），您也看不到任何问题？

标签： css firefox animation transform

【解决方案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");

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

jsFiddle

【讨论】：