Rendering issue: icon-spin fa-spin shake/wobble (chrome firefox)

[Katuva]

✋ please read https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-338336059 👈

When using data-loading-text, for example:

data-loading-text=" Logging in..."

And then when the button is clicked and the "loading" property is set, the icon will wobble and shake as it spins.

Although, if you include the spinning icon on the button as normal, for example:

Log in

It spins fine.

I've only encountered this bug on Firefox (currently version 18), works perfectly on Chrome.

edit by tagliala Firefox related issue: #3451

[luccasmaso]

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.

[ostrolucky]

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

[mikejoyceio]

Wobbling in Firefox 33, OSX.

[boustanihani]

Same problem here (wobbling spin) :(

[tagliala]

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

[alexandrejobin]

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/

[tagliala]

@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 :)

[luxzg]

@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

[tsuijie]

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

[tagliala]

@TsuiJie no, there isn't

[MichaelMaven]

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

[davegandy]

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

[davegandy]

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.

[davegandy]

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.

[alexandrejobin]

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

[qJake]

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

[tagliala]

@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:

[alexandrejobin]

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.

[bphamous]

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

[BreadMaker]

Still noticeable in Firefox 36 for Linux.

The video is recorded at 50 FPS.

[natewiebe13]

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

[JakeCooper]

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.

[isaksky]

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

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

[tagliala]

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

[isaksky]

@tagliala Here you go:

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

[tagliala]

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

Which browser is giving you that output?

[isaksky]

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?

[isaksky]

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.

[tagliala]

I will check tomorrow with my mac

[jesseangelo]

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

[Haleddo]

Problem still exist.

[ypsilonmeister]

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

[tagliala]

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

[Vusys]

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.

[tagliala]

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

[Vusys]

@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.

[tagliala]

@Vusys thanks!

[lukehutch]

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

[tagliala]

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/

[alexandrejobin]

@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/

[alexandrejobin]

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

[tagliala]

@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

[tagliala]

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

[andrevanberlo]

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

disclaimer: I am very new to all these things but as my site produces both wobbly and good results I thought you all might want to know.

[toastal]

@isaksky That wobble/blur with spinner has to do with hardware acceleration

Items that are being shown/hidden with the .hide class can have the browser hinted with the that content will be hidden

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

However, Gecko-based browser, like Firefox, are, at least to me, still having issues with jumping text in the dialog box.

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

works, but negatively effects Chrome by overcompensating and blurring the text all of the time. I came up with two possible solutions, the first just targets Firefox, the latter is a different acceleration, filter: blur(0); noted in this bug but is a bit hacky in my opinion--similar to transform: translateZ(0);--and could lead to negative outcomes in the future.

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

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

[isaksky]

That fixes the issue, thanks @toastal ! Could this be worked into a general solution @tagliala ?

[tagliala]

@toastal do you mind to provide a jsfiddle showing your solution and comparing with basic fontawesome spin?

[mautematico]

I'm trying al examples you guys posted, and I can't reproduce in Firefox Aurora:

20150722004007 Mozilla/5.0 (X11; Linux x86_64; rv:41.0) Gecko/20100101 Firefox/41.0

I'm on debian Jessie, and because of some nvidia driver issues, I think I don't have hardware acceleration.

GLXtest process failed (exited with status 1): GLX extension missing Procesador WebGL Bloqueado para tu tarjeta gráfica debido a problemas no resueltos del controlador.

Also, can't reproduce here: http://shb.github.io/bootstrap-loading-screen/#icon:spinner

is it solved, or it's because I don't have hardware acceleration enabled?

[torcado194]

I have found another potential fix for this issue (running firefox 39) thanks to this post: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

I have edited the JSFiddle above with the fix: http://jsfiddle.net/5z9om45L/

just put "perspective(1px)" in the transform property. This "throws rendering of the object to the GPU", according to the post linked above. I have not personally tested this extensively so I do not know what specifically this does or if it causes any other issues, but so far it looks fine. This has been one of my biggest issues with Firefox, so I thought I'd mention it here.

[moobee]

I have edited the JSFiddle above with the fix: http://jsfiddle.net/5z9om45L/

It fixes the issue just fine for me.