Freaking Firefox. Been as much of a pain in this project as IE. Are you using 3.0.1? There's new Mozilla specific spin classes to help this issue. If it's still happening, let me know and I'll re-open.

I can confirm I'm using 3.0.1, I even re-downloaded and double checked and the issue persists.

In my previous comment, it seems like my examples were stripped out, I'd be happy to send you the mako template where this issue happens?

I have a shake/wobble when using .icon-spin on Chromium (24.0.1312.56) and Chrome on Linux, Firefox (18.0.2) seems fine. Tested on 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09

I'm getting a shake/wobble on firefox 18.0.2 but not in Chrome or IE in certain circumstances. I haven't been able to pinpoint the exact cause however. (using font-awesome v3.0.2)

I'm getting wobble on all browsers under Windows 7, but it's a thing of beauty under OSX.

@davegandy ping

I'm getting a wobble on Chrome Version 26.0.1410.65 (fairly recent version). Any work on this?

ping! I'm also having the issue. Don't see why the issue was closed, as it still persists.

can you please provide a fiddle explaining the issue?

Same problem here, any solutions?

Confirmed for latest version of Chrome (28.0.1500.71). The smaller the icon, more exaggerated is the movement. This issue affect the icon-spin class anywhere is invoked.

I tried 3d rotation without any success. Rotating the icon-circle itself is an issue.

Under Windows 7, I'm having the issue in Firefox 22.0, Chrome 28.0.1500.72. IE 8-10 the wobble is barely visible, but looking closely at the case where I've been observing the issue, I think there's still a slight wobble. I'll do my best to set up a fiddle for the issue, but there's enough context that it may take some time.

Not my jsfiddle, but here's one with the issue: http://jsfiddle.net/Rnt9N/2/
Looks great on Mac but jittery on Firefox under Windows 7.

it's not so bad for me (firefox 22 / w7 x64).

I have same issue using node-webkit v0.7.5.
Ended up using spin.js

reopening this one since it's also FontAwesome's fault

Doing .fa-spin { -webkit-filter: blur(0); } like this tweet suggests fixed it for me.

@paldepind thanks for sharing this solution

Can you please provide a fiddle showing the current spin and the proposed spin side by side?

You can fork this fiddle: http://jsfiddle.net/tagliala/HgYqA/

I'm not seeing differences in the wobble with Chrome on Windows 7. I'm just noticing the icon spinning "slower", like at the half fps rate

@tagliala you're welcome!

Here's a fiddle showing two spinners, one with and one without the fix: http://jsfiddle.net/paldepind/XLdQX/

I've tested with Chrome 30 and Firefox 24 on Linux. In Firefox everything is smooth but in Chrome the spinner without the fix is slightly wobbly. I'm not seeing any difference in rotation speed in any of the browsers though.

Chrome 32 on Windows 7 doesn't display the icon at all...

In GNU/Linux, with Chromium 30 the fix is working. Not the same for Firefox 26, because the filter property is not yet supported. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

For Firefox 26 on Windows 8, both are still wobbly for me. In Chrome 31 on Windows 8, both look fine.
On Dec 12, 2013, at 2:20 PM, Felipe Peñailillo [email protected] wrote:

In GNU/Linux, with Chromium 30 the fix is working. Not the same for Firefox 26, because the filter property is not yet supported. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

—
Reply to this email directly or view it on GitHub.

Unfortunately it doesn't show on windows and sucks on OSX :(

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

The spinning icon is not antialiased and keeps wobbling

I hoped this was a viable workaround but it isn't

@tagliala That's unfortunate. I had only tried the fix on my machine with Linux with great results.

@paldepind oh I know I remember that on my ubuntu machine the spinning stuff really sucks

Can you please give a try to subpixel transformations: http://jsfiddle.net/tagliala/96ULe/3/

Hi! I updated to Chrome 31 today and now the wobbling has disappeared. So maybe this problem will go away all by itself.

@tagliala not sure what I'm supposed to see. It all looks like it should I think. But again this is in Chrome 31 where I'm not seeing the wobble problem anymore.

@tagliala The subpixel transformations fiddle still shows wobbliness on Chrome 31 and Firefox 26 in Kubuntu.

However, I do agree that this is caused by subpixel rendering.

Here's a new fiddle that shows a rotation letter O ("oh") with a red, circular border around it.

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

This example really exacerbates the wobbly effect, because the red border rotates smoothly, but the O wobbles.

-webkit-filter: blur(0); does fix the issue for me. I can't find any other directives that fix it, including --webkit-font-smoothing.

I also tried disabling KDE's font anti-aliasing (System Settings -> Application Appearance -> Fonts -> Use anti-aliasing=Disabled), and _this also fixes the problem_.

unfortunately -webkit-filter: blur(0); is not a solution because it breaks windows

@tagliala not sure what version of Windows it's not working in for you. I've tested the solution proposed in latest Chrome and IE 11. It doesn't seem to work with Firefox.

@silentworks it breaks Win7 x64 - chrome 32

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

Moreover, when it works, it's really poor antialiased.

I think the main problem is that icons inside fonts are not perfectly centered: http://jsfiddle.net/XLdQX/5/

As you can see in the screenshot below, there are 3 empty pixels below and 2 above: that will cause the wobble.

If you are able to set the width in a way that icon is centered, the icon won't wobble: http://jsfiddle.net/XLdQX/6/

IMHO this spinning feature should be removed, it causes more troubles than benefits

WONTFIX because a lot of work :-1:
but yeah, it was nifty... but not nescessary. Redoing all the fonts to get some icons to spin is a lot of work and goes against the tide.

@conrado there is no "wontfix" label here

it's still a wontfix. perhaps some of the gryphs that are appropriate for spin could be re-worked

it's still a wontfix.

No, it isn't. It's properly opened and labeled as bug

I'm not really sure the status of this issue, even after reading the comments, but since it's still marked as open: Chromium 31 and Firefox Aurora 28 (2014-1-13) on Xubuntu still have the shakes.

@ahamilton9 take a look here: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment-32045585

Ok, I think it's browser bug in every font.
There's three examples: http://jsfiddle.net/3T8Kz/

First: Font-Awesome font centerlized, with the bug.
Second: Another example but with a normal font
Third: Without fonts, just a div, with the same animation and without the bug.

The same bug for me Firefox 31, Linux.
If this is cause by glyphs size - it is enough to fix only glyphs intended to spin, not all of them.

:+1: +1 this should be considered for the next major version, where presumably all glyphs will be revisited.

Seeing this issue even on the official website: http://i.gyazo.com/3ba2d0afad90c2e7fe6d2c0bb34e661d.mp4

(Latest version of Firefox)

Would love to see this fixed :+1:

pull requests and deep investigations on this matter are very welcome

this seems to be a chrome bug

@davegandy any update?

@thejhnz

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

Same on Chrome 37.0.2062.124 on Mac OS X, Safari on iOS 7.0.4

+1

I was able to treat (I won't say solve) this problem for fa-refresh in a local project using
-webkit-transform-origin: 49% 48.5%;
-moz-transform-origin: 49% 48.5%;
-ms-transform-origin: 49% 48.5%;
-o-transform-origin: 49% 48.5%;
transform-origin: 49% 48.5%;

I am using "fa-circle-o-notch" as as loading symbol and use this values for transform the origin so it will not wobble

.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%;
transform-origin: 50% 48.9%;
}

@magnyld I just tried that, but continues to wobble after DOM changes.

You can't rely using origins transform. This could break if the icon is bigger or smaller. As I said before, this is not font awesome problem, because if you try to spin a perfect circle styled div, the result is the same. I bet this is webkit engine bug.

Nope, this is present in firefox too https://bugzilla.mozilla.org/show_bug.cgi?id=930079

Wobbling in Firefox 33, OSX.

Same problem here (wobbling spin) :(

pull requests with a deep analysis of this issue, a workaround and a proper explanation of advantages and drawbacks will be very welcomed.

The problem seems to come from the icon itself. If you take the Icomoon spinner version, it does'nt wobble at all. It works well on Chrome 39, Windows and IE11, Windows. I don't know for the other browsers.

http://jsfiddle.net/cxxzh0uf/

@skoub

The approach of icomoon of keeping icons all of the same size seems better for this purpose but it isn't enough.

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

If I inspect the :before pseudoelement, I notice that fontawesome is "weird"

I tried to set the same width and height but things are not getting better.

I think that this is related to the font itself and there is nothing we can do via CSS.

Dave should take a look at the font and inspect fonts generated by Icomoon to try to understand what is the best way to fix this issue.

We can't accept pull requests with edits to the .otf file, but we will appreciate some help on this matter. If someone here is able to take a look at the font and identify the problem is very welcome

Sorry for my English, it is also late here :)

@tagliala thanks for linking fa-clock-o issue here as well, it's the same issue as rest are mentioning.
I've noticed that fa-cog has the same problem, but it is not as noticeable in the same circumstances as fa-clock or some of the others mentioned above. i'll keep watching this thread and will report if I find any workarounds, but I'm pretty convinced it's the small imperfections in glyphs themselves that are surfacing only once rotating, otherwise they're too small to notice by naked eye

I have met the same issue, is there a confirmed solution for this?

@TsuiJie no, there isn't

I had a similar issue with the shaking/wobbling spin icons in IE10 and 11.

My problem was that in IE 10/11 the scrollbars were showing and hiding (pulsing) as long as the spinner was visible.

what i found was that by setting the height and width of the icon tag to a set size (same size as the icon itself), the pulsing stopped.

Hope it helps someone.
Cheers

Okay, I've figured out the issue is in Font Squirrel conversion to webfont formats. Looks like it's munging some of the metrics. My plan:

• test with a fresh version from Font Squirrel
• if that doesn't work, roll my own conversion solution

Okay, after a considerable amount of investigation, I put in a few fixes:

• Updated fa-spinner to have a better visual effect when spinning.
• Home-rolled a webfont conversion. Font Squirrel was definitely messing things up.
• Adjusted some font metrics that apparently have no effect on mac, but are heavily used by windows.
• Added animated examples to the visual test page (http://fontawesome.io/test/).

The Results

• Retina Mac: Flawless in Chrome, Safari, and Firefox
• Non-retina Mac: Much better in Chrome, Safari, and Firefox
• Windows 7: IE11 looks flawless, Chrome 39 still has issues, but I don't think it's any worse than it was

One Caveat

• At a few font sizes, there's a bit of a wobble in all browsers (Icomoon has the same issue). Basically, if you keep it to multiples and half multiples of the optimized resolution (e.g. 14px, 21px, 28px, 35px), the wobble goes away.

Since the results are much better than they were, I'm going to call this acceptable for 4.3, and keep the issue open for 5.0.

One more update. I figured out what selected option was not working well for the Font Squirrel conversion. So I put those files back in. Leaving open.

@davegandy, i don't see any improvement on my side with Firefox & Chrome on windows. I didnt tried IE11. You can clearly see the wobble if you use steps in the animation.

I understand that you cannot do much on the 4.x branch but is there any solid solution for the 5.x branch?

.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);
}

For anyone else that made it this far, and is looking for some troubleshooting:

Do not use fa-spin and fa-fw together. This can cause the "wobble" effect.

This turned out to be my problem (and my solution).

@skoub

IE11 is almost perfect, IMHO the best in windows.

The spinner icon is new and it should be better than before.

Take a look at the bottom of this heavy page with all browsers: http://fontawesome.io/test/

Chrome and firefox are really bad at small sizes :disappointed:

with IE11, with fa-pulse, there's a little glitch. It's like if the spinner is moving 1px up and go down on the next animation step.

It's working for me on IE 11 and Chrome 40.0.2214.115 m but it's wobbling in Firefox 35.0.1.

Still noticeable in Firefox 36 for Linux.

The video is recorded at 50 FPS.

Adding a scaleZ(1.001) fixes the issue for Firefox 36 on Linux.

Not sure if my problem was the same as everyone's, it seemed to be more like issue #4017, but that got closed and redirected here, so I'll just post my solution here.

Seems if you simply add the following to the .fa-spin class.

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

Seemed to fix the wobbliness for me.

Neither avoiding fa-fixed @qJake nor text-align:center @JakeCooper fixes it for me:

(Without fa-spin, there is no jitter).

@isaksky could you please provide a fiddle showing this issue? I have an idea

@tagliala Here you go:

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

Chrome 40.0.2214.115, Windows 7. Can't reproduce that issue on the provided codepen.

Which browser is giving you that output?

I'm not on my work computer right now, but I believe it is the latest normal Chrome on Windows 8. I can't normally reproduce it here on this mac in Chrome, but if I zoom in to 110% or 125% for example, it shows up. (There is also a problem where my my buttons stack vertically, but that isn't the problem I mean (I think I can fix that by using ems).). Does the jitter happen for you if you mess with the zoom?

I just got it to happen at normal (100%) zoom on this mac too. Seems related to messing with zoom and/or switching browser tabs. Btw the issue also happens with $('#spin-pls').toggleClass("fa-spin"), (instead of toggling 'hide' on it when already spinning) which might make it a little more clear where the problem is.

I will check tomorrow with my mac

I have a workaround here for spinning the cog. Nice and smooth when you hover.

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

I made a keyframe animation that spins only 30 degrees (rotateFa below). Then I call that like this animation: rotateFa .1s infinite;

@keyframes rotateFa {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

And the opposite to reverse it back

@keyframes unRotateFa {
  from { transform: rotate(30deg); }
  to { transform: rotate(0deg); }
}

Problem still exist.

It still exist in the case of hardware acceleration disabled mode. Firefox 36.0.4.

Please do not +1 or confirm that this issue still exist, because the issue is open and because we do not know how to fix.

Please take a look here: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-65381998

Perhaps it would be a good idea to put a heads up on the examples page? The issue is big enough for me to be very wary of animated icons, but as per https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-71056820, you wouldn't notice on a retina mac - even if you tested on all the major browsers.

@Vusys I agree. You could send a PR against the master branch or tell me what to write and I will do it

@tagliala done with pull request #6686 which adds the following warning below the examples:

Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.

@Vusys thanks!

I see a much worse wobble than just +/- 1 pixel. There is some weird interaction between the spin transformation and other CSS transformations, so that sometimes the center of rotation is outside the spinner icon.

I haven't nailed down which CSS rule is causing this issue yet on my site, but it looks like a case of erroneous transformation order. The order should be: translate center of icon to (0,0), then rotate by current angle, then translate (0,0) to screen position at which center icon is to be displayed (or the reverse). Somewhere in there CSS is throwing another translation into the mix.

_Update:_ I figured out what the problem was in my case, so I'll post the answer here in case anyone else can benefit from this: I had a CSS rule that was changing the width of the 'i' element that the spinner was stored in (the Bootstrap element used for FA icons). Doing so gives unpredictable results depending on the context of the icon (e.g. depending on whether or not the text was centered).

I haven't nailed down which CSS rule

I'm pretty confident that it is not a css rule and the issue is not related to FA itself

Take a look here: http://jsfiddle.net/tagliala/g0ngLhyr/

@tagliala, if it's not related to a css rule or FA, how do you explain that Icomoon don't have the wobble effect?

demo: http://jsfiddle.net/cxxzh0uf/

another exemple is the one made by google: http://www.getmdl.io/components/index.html#loading-section/spinner

@skoub your fiddle updated to 4.3.0: http://jsfiddle.net/tagliala/cxxzh0uf/9/

Take a look here: http://jsfiddle.net/tagliala/g0ngLhyr/

Note that this fiddle doesn't have webfonts at all and still shows the wobble

@skoub google's implementation is not based on webfonts and IMHO that is the proper way to deal with this feature.

I'd like to share my experience here.

Single icons:
I only have a problem with wobble with stacked icons. Single icons spin or pulse just fine

Stacked icons:
Apparently on my site the code below does not wobble in a title where the font is a bit larger, but does wobble when the font is smaller. The fa-pulse wobbles in both cases