Font-Awesome 🚀 - 渲染问题：图标旋转fa-spin摇动/摆动（Chrome Firefox）

火狐浏览器。与IE一样，这个项目让他倍感痛苦。您正在使用3.0.1吗？有新的Mozilla特定自旋类可帮助解决此问题。如果仍在发生，请通知我，我将重新打开。

davegandy 于 2013-01-14

我可以确认我使用的是3.0.1，我什至重新下载并仔细检查，问题仍然存在。

在我之前的评论中，似乎我的示例被删除了，很高兴向您发送发生此问题的mako模板？

Katuva 于 2013-01-14

在Chromium（24.0.1312.56）和Linux上的Chrome浏览器上使用.icon-spin时，我有些摇晃/晃动，Firefox（18.0.2）似乎还不错。经过13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09测试

conrado 于 2013-02-19

👍2

在某些情况下，我在firefox 18.0.2上摇摇晃晃，但在Chrome或IE中却没有摇晃/摇晃。但是，我无法查明确切原因。（使用超赞字体v3.0.2）

zoopcommerce 于 2013-02-25

我在Windows 7下的所有浏览器上都摇摆不定，但是在OSX下这真是美。

bbruneau 于 2013-03-06

@davegandy ping

conrado 于 2013-03-27

我在Chrome版本26.0.1410.65（相当新的版本）上摇摆不定。有什么工作吗？

jadekler 于 2013-04-19

👍3

ping！我也有问题。不知道为什么这个问题已经解决，因为它仍然存在。

aisthesis 于 2013-06-25

您能提供一个小提琴来解释这个问题吗？

tagliala 于 2013-06-30

这里同样的问题，有什么解决办法吗？

cqcn1991 于 2013-07-14

确认为最新版本的Chrome（28.0.1500.71）。图标越小，机芯越夸张。此问题影响在任何地方调用的icon-spin类。

BreadMaker 于 2013-07-23

我尝试了3d旋转，但没有成功。旋转icon-circle本身是一个问题。

tagliala 于 2013-07-23

在Windows 7下，我在Firefox 22.0，Chrome 28.0.1500.72中遇到问题。 IE 8-10的摆动几乎看不见，但是仔细观察我一直观察到该问题的情况，我认为仍然存在轻微的摆动。我会尽力为这个问题做一个小提琴，但是有足够的背景信息可能需要一些时间。

aisthesis 于 2013-07-23

不是我的jsfiddle，而是以下问题： http :
在Mac上看起来不错，但在Windows 7下的Firefox上却令人不安。

aisthesis 于 2013-07-23

对我来说还不错（firefox 22 / w7 x64）。

tagliala 于 2013-07-23

👍1

我在使用node-webkit v0.7.5时遇到了同样的问题。
最终使用spin.js

hamxiaoz 于 2013-09-18

重新打开这个，因为它也是FontAwesome的错

tagliala 于 2013-12-07

像这样的鸣叫做.fa-spin { -webkit-filter: blur(0); }建议为我修复它。

paldepind 于 2013-12-12

👍6 ❤2

@paldepind感谢您分享此解决方案

您能否并排显示当前旋转和建议旋转的小提琴？

您可以分叉这个小提琴： http :

我没有看到Windows 7上的Chrome在摆动方面有什么不同，我只是注意到图标旋转“更慢”，例如以半fps速率

tagliala 于 2013-12-12

@tagliala不客气！

这是一个小提琴，显示了两个微调器，一个带修正，一个不带修正： http :

我已经在Linux上使用Chrome 30和Firefox 24进行了测试。在Firefox中，一切都很流畅，但在Chrome中，没有修复的微调器有些不稳定。我没有在任何浏览器中看到旋转速度的任何差异。

paldepind 于 2013-12-12

Windows 7上的Chrome 32根本不显示图标...

tagliala 于 2013-12-12

在Chromium 30的GNU / Linux中，此修复程序有效。与Firefox 26不同，因为尚不支持filter属性。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

BreadMaker 于 2013-12-12

对于Windows 8上的Firefox 26，这对我来说仍然是不稳定的。在Windows 8的Chrome 31中，两者看起来都不错。
在2013年12月12日，在2:20 PM，费利佩Peñailillo [email protected]写道：

在Chromium 30的GNU / Linux中，此修复程序有效。与Firefox 26不同，因为尚不支持filter属性。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
-
直接回复此电子邮件或在GitHub上查看。

aisthesis 于 2013-12-12

不幸的是，它没有在Windows上显示并且在OSX上很烂:(

http://jsfiddle.net/tagliala/XLdQX/2/

旋转的图标未消除锯齿，并不断摆动

screen shot 2013-12-13 at 10 46 39

我希望这是一个可行的解决方法，但事实并非如此

tagliala 于 2013-12-13

@tagliala不幸的是。我只在Linux机器上尝试过该修复程序，但效果很好。

paldepind 于 2013-12-13

@paldepind哦，我知道我记得在我的ubuntu机器上，旋转的东西真的很烂

您能否尝试子像素转换： http :

tagliala 于 2013-12-13

嗨！我今天更新到Chrome 31，现在这种抖动已经消失了。因此，也许这个问题将自行解决。

@tagliala不知道我应该看到什么。一切看起来都应该如此。但这又是在Chrome 31中，我再也看不到摆动问题了。

paldepind 于 2013-12-13

@tagliala在Kubuntu的Chrome 31和Firefox 26上，子像素转换的小提琴仍然显示出抖动。

但是，我同意这是由亚像素渲染引起的。

这是一个新的小提琴，其中显示了旋转字母O（“哦”），并带有红色的圆形边框。

http://jsfiddle.net/bBaVN/208/

此示例确实加剧了摆动效果，因为红色边框旋转顺畅，但是O摆动。

-webkit-filter: blur(0);确实为我解决了这个问题。我找不到其他可修复此问题的指令，包括--webkit-font-smoothing。

我还尝试禁用KDE的字体抗锯齿功能（系统设置->应用程序外观->字体->使用抗锯齿功能=已禁用），并且_这也解决了问题_。

mehaase 于 2013-12-16

不幸的是-webkit-filter: blur(0);不是解决方案，因为它破坏了Windows

tagliala 于 2013-12-16

@tagliala不确定

silentworks 于 2013-12-23

@silentworks它破坏了Win7 x64-chrome 32

http://jsfiddle.net/tagliala/XLdQX/2/

而且，当它起作用时，抗锯齿效果真的很差。

我认为主要的问题是字体内的图标未完全居中： http :

如下面的屏幕快照所示，下方有3个空白像素，上方有2个空白像素：这将引起抖动。

如果您能够以图标居中的方式设置宽度，则图标不会摇摆： http :

恕我直言，应该删除此旋转功能，它带来的麻烦多于好处

tagliala 于 2013-12-23

WONTFIX，因为很多工作：-1：
但是，是的，这很漂亮……但不是必需的。重做所有字体以使某些图标旋转是一件繁重的工作，并且与潮流背道而驰。

conrado 于 2013-12-23

@conrado这里没有“ wontfix”标签

tagliala 于 2013-12-23

仍然不是问题。也许一些适合旋转的字形可以重新设计

conrado 于 2013-12-24

仍然不是问题。

不，不是。已正确打开并标记为错误

tagliala 于 2013-12-24

即使阅读了评论，我仍然不确定这个问题的状态，但是由于它仍然被标记为公开：Xubuntu上的Chromium 31和Firefox Aurora 28（2014-1-13）仍然很动摇。

ahamilton9 于 2014-02-06

@ ahamilton9在这里看看： https :

tagliala 于 2014-02-06

好的，我认为每种字体都有浏览器错误。
有三个示例： http :

第一：将Font-Awesome字体居中，并带有bug。
第二：另一个例子，但使用普通字体
第三：没有字体，只有一个div，具有相同的动画，没有错误。

victorperin 于 2014-05-26

对我来说，同样的错误Firefox 31，Linux。
如果这是由字形大小引起的，则仅修复意图旋转的字形就足够了，而不是全部固定。

nazar-pc 于 2014-07-14

：+1：+1应该考虑在下一个主要版本中使用，大概所有的字形都将在这里被重访。

johnnyshields 于 2014-08-19

即使在官方网站上也看到此问题： http :

（最新版本的Firefox）

很想看看这个固定的：+1：

thejhnz 于 2014-08-27

非常欢迎提出要求和深入调查此事

tagliala 于 2014-08-27

这似乎是一个镀铬的错误

luccasmaso 于 2014-08-27

@davegandy有更新吗？

thejhnz 于 2014-09-01

@thejhnz

https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -53544936

tagliala 于 2014-09-01

与Mac OS X上的Chrome 37.0.2062.124和iOS 7.0.4上的Safari相同

designbyadrian 于 2014-09-29

+1

aguavisual 于 2014-10-07

我能够使用以下方法在本地项目中刷新（我不会说解决）此问题
-webkit-transform-origin：49％48.5％;
-moz-transform-origin：49％48.5％；
-ms-transform-origin：49％48.5％；
-o-transform-origin：49％48.5％；
转换来源：49％48.5％；

struesdell 于 2014-10-16

👍4

我使用“ fa-circle-o-notch”作为加载符号，并使用此值来变换原点，这样它就不会摆动

.fa-circle-o-notch.fa-spin {
-webkit-transform-origin：50％48.9％;
-moz-transform-origin：50％48.9％；
-ms-transform-origin：50％48.9％；
-o-transform-origin：50％48.9％；
转换来源：50％48.9％；
}

magnyld 于 2014-11-06

@magnyld我刚刚尝试过，但是在DOM更改后仍然会摆动。

thejhnz 于 2014-11-06

您不能依靠使用原点变换。如果图标更大或更小，可能会损坏。就像我之前说过的，这不是字体问题，因为如果您尝试旋转一个完美的圆形div，结果是一样的。我敢打赌这是webkit引擎的错误。

luccasmaso 于 2014-11-06

不，在Firefox中也存在https://bugzilla.mozilla.org/show_bug.cgi?id=930079

ostrolucky 于 2014-11-07

在Firefox 33，OSX中摇摆。

mikejoyceio 于 2014-11-26

同样的问题在这里（旋转旋转）:(

boustanihani 于 2014-12-03

将对此问题进行深入分析，提出解决方法，并对变通办法以及对优缺点的正确解释将非常受欢迎。

tagliala 于 2014-12-03

问题似乎来自图标本身。如果您使用的是Icomoon微调器版本，则根本不会摇摆。它可以在Chrome 39（Windows）和IE11（Windows）上正常运行。我不知道其他浏览器。

http://jsfiddle.net/cxxzh0uf/

alexandrejobin 于 2015-01-04

@skoub

为此，icomoon保留所有相同大小图标的方法似乎更好，但这还不够。

http://jsfiddle.net/tagliala/cxxzh0uf/2/

如果检查:before伪元素，我会发现fontawesome是“怪异的”

我尝试设置相同的宽度和高度，但情况并没有得到改善。

我认为这与字体本身有关，我们无法通过CSS做任何事情。

Dave应该查看字体并检查Icomoon生成的字体，以尝试了解解决此问题的最佳方法。

我们无法接受对.otf文件进行编辑的拉取请求，但我们会在此问题上为您提供帮助。如果这里有人能够看一下字体并找出问题的所在，我们将非常欢迎

对不起，我的英语，这也晚了:)

tagliala 于 2015-01-05

@tagliala也感谢您在此处链接fa-clock-o问题，与其余提及的问题相同。
我注意到fa-cog存在相同的问题，但是在与fa-clock或上述其他一些情况相同的情况下，它并不那么引人注意。我将继续观察该线程并报告是否找到任何解决方法，但我非常确信，字形本身的微小缺陷仅在旋转一次后就会浮出水面，否则它们太小而无法用肉眼察觉

luxzg 于 2015-01-16

我遇到了同样的问题，是否有已确认的解决方案？

tsuijie 于 2015-01-17

@TsuiJie不，没有

tagliala 于 2015-01-17

IE10和11中的摇动/摆动旋转图标也有类似的问题。

我的问题是，在IE 10/11中，只要可以看到微调框，滚动条就会显示和隐藏（跳动）。

我发现的是，通过将图标标签的高度和宽度设置为设置的大小（与图标本身相同的大小），脉冲停止了。

希望它能帮助某人。
干杯

MichaelMaven 于 2015-01-22

好的，我发现问题出在将Font Squirrel转换为Webfont格式。似乎正在调整某些指标。我的计划：

使用Font Squirrel的新版本进行测试
如果不行，请推出我自己的转换解决方案

davegandy 于 2015-01-22

好的，经过大量调查后，我进行了一些修复：

更新了fa-spinner以在旋转时具有更好的视觉效果。
主页滚动了一个webfont转换。 Font Squirrel肯定搞砸了。
调整了一些字体指标，这些指标显然对mac没有任何影响，但是被Windows大量使用。
在视觉测试页面（http://fontawesome.io/test/）中添加了动画示例。

结果

视网膜Mac：Chrome，Safari和Firefox中无懈可击
非视网膜Mac：在Chrome，Safari和Firefox中更好
Windows 7：IE11看上去完美无瑕，Chrome 39仍然存在问题，但我认为它没有比以前更糟的了

一个警告

在几种字体大小下，所有浏览器都存在一些摆动（Icomoon出现了同样的问题）。基本上，如果将其保持为优化分辨率的倍数和一半倍数（例如14px，21px，28px，35px），则摆动将消失。

由于结果要好得多，因此我将其称为4.3可接受的，并将问题保留为5.0。

davegandy 于 2015-01-22

再更新一次。我发现选择的选项对于Font Squirrel转换效果不佳。所以我把那些文件放回去了。

davegandy 于 2015-01-22

@davegandy ，在Windows上使用Firefox和Chrome看不到任何改善。我没有尝试过IE11。如果在动画中使用步骤，则可以清楚地看到摆动。

我了解您无法在4.x分支上做很多事情，但是5.x分支有没有可靠的解决方案？

.fa-spin2 {
    animation: fa-spin 1s infinite steps(8);
    -webkit-animation: fa-spin 1s infinite steps(8);
    -moz-animation: fa-spin 1s infinite steps(8);
    -o-animation: fa-spin 1s infinite steps(8);
}

alexandrejobin 于 2015-01-22

对于到目前为止已经做到并正在寻找一些故障排除方法的其他人：

请勿同时使用fa-spin和fa-fw 。

原来这是我的问题（也是我的解决方案）。

qJake 于 2015-01-24

👍3

@skoub

IE11几乎是完美的，恕我直言是Windows中最好的。

微调器图标是新的，应该比以前更好。

看看所有浏览器的沉重页面的底部： http :

Chrome和firefox在小尺寸方面确实很糟糕：失望：

tagliala 于 2015-01-25

使用IE11和fa-pulse，会有一些小故障。就像微调框是否向上移动1px并向下移动下一步。

alexandrejobin 于 2015-01-31

它在IE 11和Chrome 40.0.2214.115 m上对我有效，但在Firefox 35.0.1中却不稳定。

bphamous 于 2015-02-23

在Linux的Firefox 36中仍然值得注意。

视频以50 FPS录制。

BreadMaker 于 2015-02-25

添加scaleZ(1.001)解决Linux上的Firefox 36的问题。

natewiebe13 于 2015-02-25

不知道我的问题是否与每个人的问题相同，似乎更像是问题＃4017，但此问题已在此处关闭并重定向，因此我将在此处发布解决方案。

似乎只是将以下内容添加到.fa-spin类中。

.fa-spin {
    text-align:center;
}

似乎为我解决了问题。

JakeCooper 于 2015-02-27

既不能避免fa-fixed @qJake也不能避免align：center @JakeCooper为我修复它：
filter

（没有fa-spin，没有抖动）。

isaksky 于 2015-03-05

@isaksky您能否提供一个显示此问题的小提琴？我有个主意

tagliala 于 2015-03-05

@tagliala您在这里：

http://codepen.io/isaksky/pen/JoBqoM

isaksky 于 2015-03-05

Chrome 40.0.2214.115，Windows7。无法在提供的代码笔上重现该问题。

哪个浏览器为您提供输出？

tagliala 于 2015-03-06

我现在不在我的工作计算机上，但我相信它是Windows 8上最新的普通Chrome。我通常无法在此Mac上的Chrome中重现它，但是如果我放大到110％或125％，例如，它显示出来。（还有一个问题是我的按钮垂直堆叠，但这不是我的意思（我想我可以使用ems来解决此问题）。）如果您对变焦感到困惑，是否会发生抖动？

isaksky 于 2015-03-06

我只是在Mac上以正常（100％）缩放的情况发生了。似乎与弄乱缩放和/或切换浏览器标签有关。顺便说一句， $('#spin-pls').toggleClass("fa-spin")也会发生此问题（而不是在已经旋转时在其上切换“隐藏”），这可能会使问题更清楚了。

isaksky 于 2015-03-06

我明天用我的Mac检查

tagliala 于 2015-03-06

我在这里有一个解决方法，可以旋转齿轮。当您将鼠标悬停时，感觉很好且流畅。

http://codepen.io/jesseangelo/pen/KwrqdM?editors=010

我制作了仅旋转30度的关键帧动画（以下rotateFa ）。然后我这样叫animation: rotateFa .1s infinite;

<strong i="11">@keyframes</strong> rotateFa {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

反之则相反

<strong i="15">@keyframes</strong> unRotateFa {
  from { transform: rotate(30deg); }
  to { transform: rotate(0deg); }
}

jesseangelo 于 2015-03-19

问题仍然存在。

Haleddo 于 2015-03-21

在硬件加速禁用模式下，它仍然存在。 Firefox 36.0.4。

ypsilonmeister 于 2015-03-27

请不要+1或确认此问题仍然存在，因为该问题是未解决的，并且我们不知道如何解决。

请在这里看看： https :

tagliala 于 2015-03-27

在示例页面上抬起头来也许是个好主意？这个问题足以让我非常警惕动画图标，但是根据https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820，您不会在视网膜Mac上注意到-即使您已在所有主流浏览器上进行了测试。

Vusys 于 2015-06-08

@Vusys我同意。您可以向master分支发送PR或告诉我该写什么，我会做

tagliala 于 2015-06-08

@tagliala完成请求请求＃6686，在示例下方添加了以下警告：

某些平台上的某些浏览器在动画图标方面存在问题，从而导致抖动的抖动效果。有关示例和可能的解决方法，请参见问题＃671 。

Vusys 于 2015-06-09

👍1

@Vusys谢谢！

tagliala 于 2015-06-10

我看到的摆动比仅+/- 1像素差得多。 spin转换和其他CSS转换之间存在一些怪异的交互作用，因此有时旋转中心在spinner图标外部。

我还没有在我的网站上确定是哪个CSS规则导致了此问题，但是这似乎是一种错误的转换顺序。顺序应为：将图标的中心转换为（0,0），然后旋转当前角度，然后将（0,0）转换为要显示中心图标的屏幕位置（或相反）。 CSS的某个地方将另一种翻译混入其中。

_Update：_我弄清楚了我的问题所在，因此我将答案发布在这里，以防其他人可以从中受益：我有一个CSS规则正在更改微调器的'i'元素的宽度存储在（用于FA图标的Bootstrap元素）中。这样做会根据图标的上下文（例如，取决于文本是否居中）而产生不可预测的结果。

lukehutch 于 2015-07-07

👍2

我还没有确定哪个CSS规则

我非常有信心这不是CSS规则，而且问题与FA本身无关

在这里看看： http :

tagliala 于 2015-07-07

@tagliala ，如果它与css规则或FA不相关，您如何解释Icomoon没有摆动效果？

演示： http :

alexandrejobin 于 2015-07-07

另一个示例是Google提出的示例： http :

alexandrejobin 于 2015-07-07

@skoub您的小提琴已更新至4.3.0： http :

在这里看看： http :

请注意，此小提琴根本没有webfonts，但仍显示出摆动

tagliala 于 2015-07-07

@skoub google的实现不是基于webfonts和IMHO，这是处理此功能的正确方法。

tagliala 于 2015-07-07

我想在这里分享我的经验。

单个图标：
我只有一个问题，就是带有堆叠图标的摆动。单个图标旋转或脉冲就好

堆叠的图标：
显然，在我的网站上，下面的代码不会在字体稍大的标题中摆动，但是在字体较小时会摆动。在两种情况下，脉冲都摆动

免责声明：我对所有这些事情都非常陌生，但是由于我的网站产生了不稳定和良好的效果，我想大家可能都想知道。

andrevanberlo 于 2015-07-11

@isaksky与微调器的摆动/模糊与硬件加速有关

使用.hide类显示/隐藏的项目可以使浏览器提示内容将被隐藏

#spin-pls {
  will-change: contents;
}

但是，至少对我来说，基于Firefox的基于Gecko的浏览器仍然存在对话框中文本跳转的问题。

.job-order-dialog {
  will-change: transform;
}

可以，但是会一直过度补偿和模糊文本，从而对Chrome产生负面影响。我想出了两种可能的解决方案，第一种只针对Firefox，第二种是不同的加速方式，此错误中提到了filter: blur(0); ，但在我看来还是有点棘手-类似于transform: translateZ(0); - -并可能在将来导致负面结果。

@-moz-document url-prefix() {
  .job-order-dialog {
    will-change: transform;
  }
}

.job-order-dialog {
  filter: blur(0);
}

toastal 于 2015-07-15

解决了这个问题，谢谢@toastal ！可以将其用于一般解决方案@tagliala吗？

isaksky 于 2015-07-15

@toastal您介意提供一个jsfiddle来显示您的解决方案并与基本fontawesome自旋进行比较吗？

tagliala 于 2015-07-16

我正在尝试你们发布的所有示例，但无法在Firefox Aurora中复制：

20150722004007
Mozilla / 5.0（X11; Linux x86_64; rv：41.0）Gecko / 20100101 Firefox / 41.0

我正在使用debian Jessie，并且由于某些nvidia驱动程序问题，我认为我没有硬件加速。

GLXtest进程失败（以状态1退出）：缺少GLX扩展名
WebGL的Procesador WebGL无法控制任何问题。

另外，无法在此处复制：
http://shb.github.io/bootstrap-loading-screen/#icon：spinner

解决了吗，还是因为我没有启用硬件加速？

mautematico 于 2015-07-23

由于这篇文章，我已经找到了解决此问题的另一个潜在解决方案（运行firefox 39）： http :

我已经使用修复程序编辑了上面的http :

只需在transform属性中放置“ perspective（1px）”。根据上面链接的文章，这“将对象渲染到GPU”。我尚未对此进行广泛的个人测试，因此我不知道它的具体作用或是否会引起任何其他问题，但到目前为止看起来还不错。这是我使用Firefox遇到的最大问题之一，因此我想在这里提到它。

torcado194 于 2015-07-25

我已经使用修复程序编辑了上面的JSFiddle： http :

它解决了这个问题，对我来说很好。

moobee 于 2015-07-27

这是更新的小提琴，显示了指南针上的摇摆。第二个定位按钮显示一个带有明显摆动的简单fa-spin。

http://jsfiddle.net/Lpur9ek1/1/

spiderr 于 2015-07-31

@spiderr显然， fa-lg增加了摆动效果，因为它处理行高和字体大小。尝试使用14px或倍数的字体

tagliala 于 2015-07-31

@tagliala，谢谢！ fa-2x肯定更好。圆周围还存在一些奇怪的伪像（脏像素）。这是fa-5X的小提琴，在蓝色的大按钮上可以更清晰地显示它们。这是一分钟的细节，但是如果有人清理过指南针，那将是很棒的。我的希望是，当指南针旋转时，您无法分辨出圆圈在移动，只能分辨出指南针的内部。如果我用fa-5x距离屏幕2米，那看起来很棒:-)

http://jsfiddle.net/mhqLvw79/1/

spiderr 于 2015-07-31

不知道这是否是正确的线程，但是..
在Firefox中，我的“ fa fa-cog fa-spin”停止旋转。我在带有模式的ajax调用中使用它。它可以在Safari和Chrome中正常运行，但是由于某些原因，Firefox停止了。有什么想法吗？？

app / javascripts / my_file.js
$（document）.ready（function（）{
$（'＃search_btn'）。on（'click'，function（）{
$（'＃results'）。empty（）;
var myForm = $（'＃user_search'）;
$（“＃spinner_modal”）。modal（“ show”）;
$ .ajax（{
网址：myForm.attr（'action'），
输入：“ POST”，
数据：myForm.serialize（），
dataType：“文本”，
成功：功能（html）{
$（“＃spinner_modal”）。modal（“ hide”）;
$（'＃results'）。append（html）;
}，
错误：function（xhr，satus，err）{
$（“＃spinner_modal”）。modal（“ hide”）;
}，
超时：60000
}）;
返回false；
}）;

_my_partial.html.erb

jonathanparrish 于 2015-08-11

@jonathanparrish请开始新一期。不用担心提我，我来看一看:)

tagliala 于 2015-08-12

我如何解决图标字体偏心旋转的问题：
我必须解决几个问题：
1.图标的大小：必须为整个px大小（例如font-size：small；使我的图标为17.5px，所以center并不是转换的绝对中心）
2.定义显示：图标级别的块使其在父div的中间正确居中
3.定义父div的确切正方形大小（在我的情况下为按钮），并固定填充使其正确居中
4.添加任何文本阴影将更改内部图标的大小，使其不在中心。技巧是将悬停样式更改为与我的情况下背景颜色相同的阴影

所以这是代码：

button.close {
    padding: 10px;
    opacity: 0.8;
    text-shadow: 1px 1px 1px #999; 
    width: 40px;
    height: 40px;
}
button.close i{
    font-size: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block;
}
button.close:hover {
    text-shadow: 1px 1px 1px #fff; 
}
/* rotation CSS*/
<strong i="12">@keyframes</strong> anim-rotate {
    0% {
        -moz-transform:rotate(0);
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
<strong i="13">@keyframes</strong> anim-rotate-next {
    0% {
        -moz-transform:rotate(0);
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotate{
    animation: anim-rotate-next 1s normal linear;
}
.rotate.down{
    animation: anim-rotate 1s normal linear;
}

HTML：

<div id="NewsTitle" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div>
            <button type="button" class="close visible-sm-block hidden-xs"><i class="fa fa-expand"></i></button>
            <button type="button" class="close"><i class="fa fa-chevron-up"></i></button>
            <button type="button" class="close"><i class="fa fa-refresh rotate"></i></button>
            <span>Vesti</span>
        </div>
    </div>

最后是JQuery，用于切换旋转类

$("#NewsTitle").on('click', 'i.fa-refresh', function () {
    // rotiraj ikonu
    $(this).toggleClass("down");
});

https://jsfiddle.net/4ya23yjL/8/

goranbujic 于 2015-10-01

@goranbujic感谢分享

您能否摆弄一下您的方法（您可以将其用作基础http://jsfiddle.net/tagliala/4ya23yjL/），并正确设置您的帖子格式？

谢谢！

tagliala 于 2015-10-01

刚刚做到了...对不起gitHub上的第一个:)

日期：2015年10月1日，星期四07：53：45-07-07
来自： [email protected]
至： [email protected]
抄送： [email protected]
主题：回复：[Font-Awesome]渲染问题：icon-spin fa-spin晃动/摆动（chrome Firefox）（＃671）

@goranbujic感谢分享

您能否摆弄一下您的方法（您可以将其用作基本方法http://jsfiddle.net/tagliala/4ya23yjL/）并正确设置帖子的格式？

谢谢！

-
直接回复此电子邮件或在GitHub上查看。

goranbujic 于 2015-10-01

爱你们感谢.fa-refresh.fa-spin <3的transform-origin: 49% 48.5%;修复

但是，认真的说，如果它们要动画的话，希望将它们对称地得到！

tomasdev 于 2015-12-22

如果有人在像我这样的离子子，这将transform-origin: 52% 50%;

im4aLL 于 2016-02-27

确认问题

Google Chrome:  51.0.2662.0 (Officiell version) canary (64 bitar)
Version:    4d223c72fe4e76c7404bffb662f742b947f97107-refs/heads/master@{#378134}
OS  Mac OS X

aka最新的chrome金丝雀，仅适用于fa-pulse艰难（主要通过fa fa-spinner fa-pulse进行测试）

swantzter 于 2016-03-02

以前在v4.5.0上，我必须添加以下CSS样式来解决微调器上的摆动问题：

.fa.fa-spinner.fa-pulse {
  transform-origin: 50% 48.5%;
}

但是在4.6.1上，css实际上使情况更糟。 4.6.1似乎已经解决了微调器的抖动问题。

gnail 于 2016-04-21

关于这一点：

http://jsfiddle.net/tagliala/g0ngLhyr/

问题是这个东西是否死了，特别是关于这个东西使用系统上可用的任何字体。
传播具有完美死点圆的图像或SVG并使之旋转可能会很有趣。

更新：
http://jsfiddle.net/xntwxwra/
它似乎没有在这里摆动（[email protected]），只是没有抗锯齿可能使它看起来有些可笑。

My1 于 2016-04-21

这可能会也可能不会有帮助。我在Chrome 51.0.2704.103 m处晃动，意识到模板随附的css设置了letter-spacing: 0.25em; 。对于fa-spin类，我将其重置为letter-spacing: normal; ，瞧，不要晃动！

pilotandy 于 2016-07-19

👍3 🎉1

我不确定我们是否在谈论同一件事，但我注意到在small元素中使用<i class="fa fa-pulse fa-spinner fa-fw"</i>似乎会跳动。我不是CSS英雄，所以我只是通过将其包装在span （从而删除了small ）来“解决”它

我正在使用来自maxcdn.bootstrap.com的很棒的4.6.3和来自netdna.bootstrapcnd.com的bootstrap 3.3.7。

bastbnl 于 2016-09-03

更改父元素的字体大小时，我可以可靠地重现摆动。在chrome浏览器中的这种拨弄中，左微调器在摆动，而右微调器是固定的。

stenno 于 2016-09-13

人们使用的“修补程序”数量令人担忧，如果有很多不同的“修补程序”人们发布的实际上是经过测试可在所有浏览器上使用的数量。

如果字形的位置不对称，以至于顶部和底部之间的间隙不同，则将出现上述“摆动”。

已经有人提出，要重新构造字形是一项繁重的工作，那么为什么不仅仅使用更适合旋转图标的图像（例如SVG）呢？您不需要使用Font Awesome来解决所有问题，有时这样做没有任何意义。

Matthew-Bonner 于 2016-09-14

👍7

在Ubuntu Xenial 16.04下从Firefox 48升级到Firefox 49后出现了摆动效果。
如该线程中所建议的那样，通过添加“ line-height：normal”来修复。

vizzah 于 2016-09-26

👍2

@ Matthew-Bonner因此，如果不适合此目的，应将其从文档中删除！

mehrandvd 于 2017-01-08

@mehrandvd中的某些图标可以很好地工作，因此为什么要有说明文档的内容，也许最好更新文档以使某些图标无法正常工作，并且存在已知问题。

Matthew-Bonner 于 2017-01-10

@ Matthew-Bonner这是一个好主意，并且已部分记录在案。

某些平台上的某些浏览器在动画图标方面存在问题，从而导致抖动的抖动效果。有关示例和可能的解决方法，请参见问题＃671。

如果您有改进此句子的建议，请随时向主分支提交PR

tagliala 于 2017-01-10

@tagliala我会做的，我认为鉴于正在开发Font Awesome 5，应该关闭它并添加标签“ wontfix”，以解决此错误，因为实际上没有什么可以做的。

Matthew-Bonner 于 2017-01-11

👍1

我发现摆动效果取决于字体大小。
例如，我将字体大小从1.5em更改为1.4em，将21px更改为20px，瞧，不再晃动了。

ruwen-m 于 2017-01-11

👍4

我通过用svg版本替换circle-o-notch图标解决了我的问题（修正了非正方形纵横比）。

这是一个小提琴： https :

Donaldini 于 2017-03-09

我对所有浏览器（IE，FF，Chrome，Safari）都遇到相同的问题（2017）。保持微调器居中不知道这么大的问题。

Taygair 于 2017-05-17

👍1

我正在开始一项活动，免费提供免费的开源FA图标。您可以通过多种方式将它们合并：生成另一种图标字体，svg集合，或者（根据我的喜好）将所有FA和第三方图标

不同的旋转图标在这里。

以前的版本是主持人，不和谐，硬币， Google Play ， Thin Close ，步行者， T恤， Xbox ， Nintendo Wii U ， Nintendo ， PlayStation ， Facebook Messenger和Line图标。

如果您要我继续执行这些图标请求，或者编译一些升级文件，或者应该怎么做，请告诉我。

visualpharm 于 2017-05-27

如果这会有所帮助，请不要支持，但我设法通过摆弄CSS来使微调器静止。我同时测试了Glyphicons和FontAwesome字体，只是为了看一个巫婆看起来更好。我尝试旋转图标并使用和图标旋转容器。有5个关键参数可以完成这项工作（字体大小，高度，宽度，行高和文本缩进）。

您可以在此处找到示例：
https://jsfiddle.net/Dhanck/syb9qubj/2/

期待版本5！

Dhanck7 于 2017-07-06

@ Dhanck7 ：谢谢您分享！要使其正常工作，需要什么CSS狂欢！在这之间，我发现了一个简单的动画“ Font Awesome外部”，可以直接使用！

仍然不敢相信他们从Kickstarter的Font Awesome 5上获得了超过100万美元的收入，但无法制作出能够正常工作的简单动画。叹

Taygair 于 2017-07-06

就像您已经看到的那样，这些动画非常复杂，因此操作起来并不容易。

问题是我们正在处理字符（又名文本），而不是图像，这使处理变得更加复杂。

My1 于 2017-07-06

怎么样呢：
https://jsfiddle.net/Dhanck/9t6y85jx/2/

只需调整3个参数并使用FontAwesome中的默认动画行为即可...

您还可以使用JavaScript删除行距属性，我猜。

Dhanck7 于 2017-07-06

好的，大家。

随着版本5的到来，我认为我们已经使用新的SVG框架解决了此问题。我刚刚使用新的SVG“ cog”进行了一系列测试，并且旋转非常完美地集中在我测试的数十种浏览器中。

如果您支持Kickstarter或已预订，并且可以访问最新的Alpha版本（可从您的帐户中下载），可以帮助我进行测试吗？

我很想使用Font Awesome 5解决这个问题！

robmadole 于 2017-08-03

🎉2 👍2

很高兴听到！我没有支持Font Awesome 5，但我愿意在发行后购买。 Font Awesome 5中的所有图标都具有相同的高度和宽度吗？有时它会因不同的高度/宽度而弄乱我的GUI。

Taygair 于 2017-08-03

@Taygair图标的高度相同，但是宽度不同。

robmadole 于 2017-08-07

我知道...使用fa-rotate时，高度变成宽度，反之亦然。在视觉上确实有一些图标具有相同的高度和宽度（对称的），但是没有。如果它们具有相同的高度/宽度（在FA5中），那就太好了。

Taygair 于 2017-08-07

我看到它可能会在即将发布的FA⁵版本中修复，但以防万一smb需要快速修复.fa-circle-o-notch ，这里有点脏的CSS替换

.loader {
  width: 1em;
  height: 1em;
  border: .1em solid black;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fa-spin 2s infinite linear;
}

afanasy 于 2017-09-21

到目前为止，这似乎在SVG框架上运行良好。关闭，除非有人发现这是错误的。

robmadole 于 2017-10-11

与SVG框架配合良好

如果webfonts仍然受到影响，并且FA5 free也将受到影响，则应将其标记为wontfix，并建议考虑为旋转图标使用svg解决方案

tagliala 于 2017-10-20

@tagliala同意。恐怕Web字体总是会遇到有关此问题的困扰，因此，如果这是一个问题，SVG是最好的解决方案。我们将尽快释放FA5。

robmadole 于 2017-10-20

👍2

SVG框架还不错，但是有一件令人讨厌的事情：JavaScript。

ppl使用noscript之类的东西来保护自己免受js可能造成的影响的原因有很多，而当JS无法使用某些东西时，它就是丑陋的imo。

我的意思是我们拥有诸如@ font-face和CSS动画之类的东西，因此这些任务不再需要JS，这是一件好事。

My1 于 2017-10-21

对不起😢

标记为willtfix，但实际上是“无法解决”

TL; DR
请确保您的微调框使用的字体大小为16像素（FA4为14像素）的倍数。 它会有所帮助。
如果您不满意并且需要像素完美的微调器，请考虑使用动画SVG微调器。

tagliala 于 2017-10-21

👍6

@ My1 ，不需要JS来为SVG设置动画，可以使用CSS。

PeterShaggyNoble 于 2017-10-21

好话@tagliala ...“无法解决”更准确。我多次尝试：D

robmadole 于 2017-10-21

很好，但是SVG框架只能在启用JS的浏览器中加载。

我已经尝试过了。

如果您有FA Pro，请获取演示服务器，禁用js（在chrome中易于操作）并访问

http：// localhost ：3344 / docs / svg-framework.html

您会看到没有图标会加载。

您可能可以单独执行svg，但是我的回答恰恰是针对那些说SVG Framework的人。

还有谁有这个问题？我在Firefox chrome和Opera中尝试了@tagliala的链接，并没有注意到很多摆动（当我接近42英寸FHD屏幕的5厘米处时，我当然应该能够注意到像素中的任何怪异之处，在这里您可以轻松看到像素）

还FAa FA5是否会变为16px，然后更改基本大小？

My1 于 2017-10-21

这怎么是个大问题

FreezePhoenix 于 2017-12-22

👎6 👍5

使用负的文本缩进值可以解决我的问题

andreobriennz 于 2019-01-30

🎉1

好像filter: blur(0)可以完成工作，并且它得到很好的支持https://caniuse.com/#feat = css-filters

domenkozar 于 2019-07-22

👍2

@andreobriennz的解决方案和为每种尺寸设置line-height的组合对我来说是非常不错的结果。仍然是一个非常轻微的子像素摆动，但是基本上没有引起注意。

.fa-spin {
  text-indent: -0.000001em;
  line-height: 0.6em;
}
.fa-spin.fa-lg {
  line-height: 0.7em;
}
.fa-spin.fa-2x {
  line-height: 0.8em;
}
.fa-spin.fa-3x,
.fa-spin.fa-4x,
.fa-spin.fa-5x {
  line-height: 1em;
}

camslice 于 2020-06-15

👍2

Font-awesome: 渲染问题：图标旋转fa-spin摇动/摆动（Chrome Firefox）

✋请阅读https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -338336059👈

最有用的评论

所有147条评论

相关问题