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

Open
Katuva opened this Issue Jan 13, 2013 · 123 comments

Projects

None yet
@Katuva
Katuva commented Jan 13, 2013

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
Member

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.

@davegandy davegandy closed this Jan 14, 2013
@Katuva
Katuva commented Jan 14, 2013

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
conrado commented Feb 19, 2013

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 13d5dd3

@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
bbruneau commented Mar 6, 2013

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

@jadekler

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
Member

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
Member

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
Member

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
Member
tagliala commented Dec 7, 2013

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

@tagliala tagliala reopened this Dec 7, 2013
@paldepind

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

@tagliala
Member

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

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

image

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

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

screen shot 2013-12-13 at 10 46 39

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
Member

@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
mehaase commented Dec 16, 2013

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

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
Member

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

image

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
conrado commented Dec 23, 2013

WONTFIX because a lot of work 👎
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
Member

@conrado there is no "wontfix" label here

@conrado
conrado commented Dec 24, 2013

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

@tagliala
Member

it's still a wontfix.

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

image

@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
Member
tagliala commented Feb 6, 2014

@ahamilton9 take a look here: #2709 (comment)

@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 this should be considered for the next major version, where presumably all glyphs will be revisited.

@thejhnz
thejhnz commented Aug 27, 2014

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

(Latest version of Firefox)

Would love to see this fixed 👍

@tagliala
Member

pull requests and deep investigations on this matter are very welcome

@luccasmaso

this seems to be a chrome bug

@thejhnz
thejhnz commented Sep 1, 2014

@davegandy any update?

@tagliala tagliala changed the title from icon-spin shake/wobble to Rendering issue: icon-spin shake/wobble (chrome firefox) Sep 2, 2014
@tagliala tagliala changed the title from Rendering issue: icon-spin shake/wobble (chrome firefox) to Rendering issue: icon-spin fa-spin shake/wobble (chrome firefox) Sep 2, 2014
@designbyadrian

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

@aguavisual

+1

@struesdell

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
magnyld commented Nov 6, 2014

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
thejhnz commented Nov 6, 2014

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

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

@gadelat
gadelat commented Nov 6, 2014

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

@Lothiraldan Lothiraldan referenced this issue in Lothiraldan/saltpad Nov 26, 2014
Open

Shaky in progress arrows #10

@mikejoyceio

Wobbling in Firefox 33, OSX.

@boustanihani

Same problem here (wobbling spin) :(

@tagliala
Member
tagliala commented Dec 3, 2014

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

@skoub
skoub commented Jan 4, 2015

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
Member
tagliala commented Jan 5, 2015

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

image

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

image

image

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
luxzg commented Jan 16, 2015

@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
TsuiJie commented Jan 17, 2015

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

@tagliala
Member

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

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 davegandy added this to the 4.3.0 milestone Jan 22, 2015
@davegandy
Member

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 davegandy modified the milestone: 5.0.0, 4.3.0 Jan 22, 2015
@davegandy
Member

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.

@skoub
skoub commented Jan 22, 2015

@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
qJake commented Jan 24, 2015

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
Member

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

@skoub
skoub commented Jan 31, 2015

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.

Font-awesome issue #671 firefox linux

@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
isaksky commented Mar 4, 2015

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

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

@tagliala
Member
tagliala commented Mar 4, 2015

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

@tagliala
Member
tagliala commented Mar 5, 2015

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

Which browser is giving you that output?

@isaksky
isaksky commented Mar 5, 2015

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
isaksky commented Mar 5, 2015

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
Member
tagliala commented Mar 5, 2015

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
Haleddo commented Mar 21, 2015

Problem still exist.

@ypsilonmeister

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

@tagliala
Member

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: #671 (comment)

@Vusys
Contributor
Vusys commented Jun 8, 2015

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 #671 (comment), you wouldn't notice on a retina mac - even if you tested on all the major browsers.

@tagliala
Member
tagliala commented Jun 8, 2015

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

@Vusys
Contributor
Vusys commented Jun 9, 2015

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

@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
Member
tagliala commented Jul 7, 2015

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/

@skoub
skoub commented Jul 7, 2015

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

@skoub
skoub commented Jul 7, 2015

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

@tagliala
Member
tagliala commented Jul 7, 2015

@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
Member
tagliala commented Jul 7, 2015

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

@minwe minwe referenced this issue in amazeui/amazeui Jul 8, 2015
Open

Icon 旋转动画抖动问题 #609

@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
toastal commented Jul 15, 2015

@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
isaksky commented Jul 15, 2015

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

@tagliala
Member

@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
moobee commented Jul 27, 2015

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

It fixes the issue just fine for me.

@spiderr
spiderr commented Jul 31, 2015

Here is an updated Fiddle that shows the wobbling on the compass. The second locate button shows a simple fa-spin with pronounced wobbling.

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

@tagliala
Member

@spiderr apparently, fa-lg increases the wobble effect because it deals with line height and font size. Try to use a font size of 14px or multiples

@spiderr
spiderr commented Jul 31, 2015

@tagliala thanks, great tip! fa-2x definitely better. There are also some odd artifacts (dirty pixels) around the circle. Here is a fiddle at fa-5X that shows them more clearly on the large blue button. This is a minute detail, but if someone ever cleans up the compass, that would be great. My hope is that when the compass spins, you could not tell the the circle was moving, only the inner compass needle. If I sit 2 meters from the screen with fa-5x, it looks great :-)

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

@jonathanparrish

Not sure if this is the right thread, but..
In firefox, my "fa fa-cog fa-spin" stops spinning. I use it in an ajax call with a modal. It works fine in Safari and Chrome but firefox stops for some reason. Any thoughts??

app/javascripts/my_file.js
$(document).ready(function() {
$('#search_btn').on('click', function() {
$('#results').empty();
var myForm = $('#user_search');
$("#spinner_modal").modal("show");
$.ajax({
url: myForm.attr('action'),
type: "POST",
data: myForm.serialize(),
dataType: 'text',
success: function(html){
$("#spinner_modal").modal("hide");
$('#results').append(html);
},
error: function(xhr, satus, err) {
$("#spinner_modal").modal("hide");
},
timeout: 60000
});
return false;
});

_my_partial.html.erb

@tagliala
Member

@jonathanparrish please start a new issue. Do not worry to mention me, I will take a look :)

@goranbujic

How I solved my issue with out-of-center rotation of icon font:
There were several issues I had to resolve:
1. size of icon: it has to be whole px size (e.g. font-size:small; makes my icon 17.5px so center is not absolute center for transformation)
2. defining display: block on icon level makes it center correctly in the middle of the parent div
3. defining exact square size of parent div (in my case button) and fixed padding made it center correctly
4. adding any text-shadow will change the size of the inner icon so it will be out of the center. Trick is to change the hover style to be the same shadow with color same as background in my case

So here is the code:

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

and finally JQuery for switching rotate class

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

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

@tagliala
Member
tagliala commented Oct 1, 2015

@goranbujic thanks for sharing this

Could you please make a fiddle showing your approach (you could use this one as a base http://jsfiddle.net/tagliala/4ya23yjL/) and properly format your post?

Thanks!

@goranbujic

just did it... sorry first one on gitHub :)

Date: Thu, 1 Oct 2015 07:53:45 -0700
From: notifications@github.com
To: Font-Awesome@noreply.github.com
CC: gbujic@hotmail.com
Subject: Re: [Font-Awesome] Rendering issue: icon-spin fa-spin shake/wobble (chrome firefox) (#671)

@goranbujic thanks for sharing this

Could you please make a fiddle showing your approach (you could use this one as a base http://jsfiddle.net/tagliala/4ya23yjL/) and properly format your post?

Thanks!


Reply to this email directly or view it on GitHub.

@tomasdev

Love you all guys. Thanks for the transform-origin: 49% 48.5%; fix on .fa-refresh.fa-spin <3

But seriously, would love to get those things symetrically if they're going to be animated!

@im4aLL
im4aLL commented Feb 27, 2016

If anyone here for ionicons like me, this will does the trick transform-origin: 52% 50%;

@svbeon
svbeon commented Mar 2, 2016

confirming the issue on

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

aka latest chrome canary, this only applies for fa-pulse tough (tested mainly with fa fa-spinner fa-pulse)

@gnail
gnail commented Apr 21, 2016

Previously on v4.5.0 I had to add the following CSS style to fix the wobbling issue on spinner:

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

However on 4.6.1 that css actually made it worse. 4.6.1 seems to have solved the wobbling issue for spinner.

@My1
My1 commented Apr 21, 2016 edited

concerning this one:

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

the question is whether or not this thing is dead center, especially concerning that this thing uses whatever font is available on the system.
it might be intresting to ave an image or an SVG which has a perfect dead-centered circle and let that spin.

update:
http://jsfiddle.net/xntwxwra/
it doesnt seem to wobble here (FF45@win8.1) just no anti-aliasing probably makes it look a bit funny.

@pilotandy
pilotandy commented Jul 19, 2016 edited

This may or may not help. I had a wobble in Chrome 51.0.2704.103 m, and realized the css that came with my template had set letter-spacing: 0.25em;. For the fa-spin class, I reset it to letter-spacing: normal; and voila, no wobble!

@bastbnl
bastbnl commented Sep 3, 2016 edited

I'm not sure if we're talking about the same thing but I noticed that <i class="fa fa-pulse fa-spinner fa-fw"</i> appears jumpy when used within small element. I'm not a css hero, so I just "solved" it by wrapping it within a span (and thus removing the small)

I'm using font awesome 4.6.3 from maxcdn.bootstrap.com with bootstrap 3.3.7 from netdna.bootstrapcnd.com.

@stenno
stenno commented Sep 13, 2016 edited

i can reliably reproduce the wobbling when changing the font size of the parent element. In this fiddle in a chrome browser, the left spinner is wobbling while the right spinner is fixed.

@Matthew-Bonner
Matthew-Bonner commented Sep 14, 2016 edited

The amount of "fixes" people are using worries me, if there are lots of different "fixes" people are posting just how many have actually been tested to work across all browsers.

If the glyph isn't symmetrically positioned such as that the gap between the top and the bottom differ there is going to be a "wobble" as described.

It has already been suggested that remaking the glyphs is a lot of work, so why not just use an image (such as an SVG) which would be better suited for a spinning icon? You don't need to use Font Awesome to solve all your problems and sometimes it doesn't make sense to do so.

@vizzah
vizzah commented Sep 26, 2016 edited

Wobbling effect appeared after upgrade from Firefox 48 to Firefox 49 under Ubuntu Xenial 16.04.
Was fixed by addition of "line-height: normal" as suggested in this thread.

@mehrandvd

@Matthew-Bonner So, if it is not suitable for this purpose, it should be removed from the documentation!

@Matthew-Bonner

@mehrandvd some of the icons work perfectly fine, hence why there is documentation to cover this, maybe it would be better to update the documentation to make it clear that some icons don't work as well as others and there are known issues.

@tagliala
Member

@Matthew-Bonner this is a good idea and it is partially documented.

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

if you have a suggestion to improve this sentence, feel free to submit a PR against the master branch

@Matthew-Bonner
Matthew-Bonner commented Jan 10, 2017 edited

@tagliala I will do, and I think given Font Awesome 5 is being developed, this bug should be put to bed by closing it and adding the label "wontfix" as there isn't really anything that can be done.

@ruwen-m
ruwen-m commented Jan 11, 2017

I found out that the wobbling effect depends on the font-size.
e.g. i changed font size 1.5em to 1.4em and 21px to 20px and voila, no wobbling anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment