Font-awesome: Icon won't stop spinning on Internet Explorer 11

[JGulbronson]

On Internet Explorer 11, (not reproducible on Chrome or Firefox), the icon won't stop spinning even after the fa-spin class has been removed from the element. I have attached two Plunker links, one where I reproduce the error with jQuery, the other with Angular. I am not sure if this is more of an IE11 issue than a font-awesome one, but I wanted to make sure it was reported.

jQuery: http://plnkr.co/edit/BrAl8amgqerjsmPqfhSR?p=preview
Angular: http://plnkr.co/edit/79XdW5yk6JIfmnUq8ovN?p=preview

[tagliala]

(Un)fortunately I don't have IE11 anymore, I will take a look on IE Edge

[wolfy1339]

Can't reproduce myself on IE11. Please state your Windows version.

[JGulbronson]

Windows 8.1 Pro. Able to reproduce first try.

[jrust]

Running Windows 8.1 with IE11 and repro'd it. Strange thing is that if I inspect the element with developer tools then I cannot get it to repro. And if I inspect the element while it is in the broken state of spinning when it should not then it stops. It seems IE isn't recognizing the need to repaint when the fa-spin class is removed.

[jrust]

Got it down to an even simpler example which is just the adding and then removal of the fa-spin class. On IE it never stops spinning: http://plnkr.co/edit/V14RGGXc655RypA5U8QQ?p=preview

[JGulbronson]

I've also been able to repro the issue on Windows 10, using IE11

[cvrebert]

Bugs in IE/Edge itself can be filed via
:arrow_right: https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm

[JGulbronson]

Here's a workaround demo: http://plnkr.co/edit/z4XgEkLEM5695R7EeXfu?p=preview

It seems that the issue is because IE isn't redrawing the element after the class is removed. However, if you access the element with jQuery, and in this case try to get it's height, the browser will redraw it. Not the best fix in terms of performance, but a workaround for those experiencing the same issue.

Either way, it definitely feels like an IE-only bug, so feel free to close this issue.

[yblondeau]

Just for reference, this workaround is OK for IE11 but does not change anything for Edge, where the same issue is present.
Under Edge, setting the element's height (even to the same value it had before) does provide the same workaround as described above.

Thanks @JGulbronson !

[tagliala]

Fontawesome is not involved in this issue, here it is an example without FA: http://jsfiddle.net/tagliala/pLe89yo7/8/

Closing here

[weiwarren]

Reproduced on IE11 on windows 8.1 pro.

One solution to this is to swap the spin class with a "stop-spin" class which rotates from 0 to 0 degree, this will update the animation and force it to stop. Here is an example:

http://jsfiddle.net/na1pzb98/4/

[mpKness]

My solution was to add a class with no css when removing the spinning class, which i guess causes the draw method to be caleld

[tagliala]

@mpKness could you please provide a working jsfiddle and edit the troubleshooting wiki at https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting ?

You can use this one as a base: https://jsfiddle.net/tagliala/4Lcpvhoo/

[mpKness]

Ill do it if I have the time, but I wrote it in react for a client

[broerse]

I see this bug also on https://bloggr.exmer.com/ (https://github.com/broerse/ember-cli-blog) in IE11 and Windows 10.

[rekna1]

http://stackoverflow.com/questions/32265720/spinning-icons-strange-behavior-on-ie
Seems to fix the issue for me...
.fa { &:not(.fa-spin) { animation: none; } }

Should be included in default font-awesome styles

[yblondeau]

The final solution for me was to force the transform CSS value after removing the class.

Something like this:

$('#icon').addClass('fa-spin');
setTimeout(function() {
  $('#icon').removeClass('fa-spin');
  $('#icon').css('transform', 'none');
}, 2000);

[scipper]

@rekna1 Perfect! Works like a charm. Also good solution, because of no JS influence.

[jetfontanilla]

plain CSS version of @rekna1 's answer:

.fa:not(.fa-spin) {
    animation: none;
}

[morbac]

For information, I had same issue using Prototype: the icon was still spinning despite my
$('objID').removeClassName('fa-spin')

Seems to be fixed if I force a .show():
$('objID').removeClassName('fa-spin').show()

[ZacharyCauchi]

Plain CSS version for both fa-spin and fa-pulse

.fa:not(.fa-spin):not(.fa-pulse) {
  animation: none;
}

Thanks @jetlogs !