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

[davegandy]

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.

[Katuva]

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?

[conrado]

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

[zoopcommerce]

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)

[bbruneau]

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

[conrado]

@davegandy ping

[jeanbza]

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

[aisthesis]

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

[tagliala]

can you please provide a fiddle explaining the issue?

[cqcn1991]

Same problem here, any solutions?

[BreadMaker]

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.

[tagliala]

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

[aisthesis]

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.

[aisthesis]

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.

[tagliala]

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

[hamxiaoz]

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

[tagliala]

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

[paldepind]

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

[tagliala]

@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

[paldepind]

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

[tagliala]

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

[BreadMaker]

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

[aisthesis]

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 notifications@github.com 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.

[tagliala]

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

[paldepind]

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

[tagliala]

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

[paldepind]

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.

[mehaase]

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

[tagliala]

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

[silentworks]

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

[tagliala]

@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

[conrado]

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.

[tagliala]

@conrado there is no "wontfix" label here

[conrado]

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

[tagliala]

it's still a wontfix.

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

[ahamilton9]

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.

[tagliala]

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

[victorperin]

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.

[nazar-pc]

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.

[johnnyshields]

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

[thejhnz]

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:

[tagliala]

pull requests and deep investigations on this matter are very welcome

[luccasmaso]

this seems to be a chrome bug

[thejhnz]

@davegandy any update?

[tagliala]

@thejhnz

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

[designbyadrian]

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

[aguavisual]

+1

[smartintruesdell]

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%;

[magnyld]

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

[thejhnz]

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