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

Posted 2023-03-06

【中文标题】(Firefox 错误) 转换时字体马虎

【英文标题】：(Firefox bug) Font is sloppy when transformed

【发布时间】：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框中），您也看不到任何问题？

【参考方案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