Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Katuva opened this issue Jan 13, 2013 · 152 comments
Closed

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

Katuva opened this issue Jan 13, 2013 · 152 comments

Comments

@Katuva
Copy link

Katuva commented Jan 13, 2013

βœ‹ please read #671 (comment) πŸ‘ˆ

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
Copy link
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.

@Katuva
Copy link
Author

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
Copy link

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
Copy link

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
Copy link

bbruneau commented Mar 6, 2013

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

@conrado
Copy link

conrado commented Mar 27, 2013

@davegandy ping

@jadekler
Copy link

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

@aisthesis
Copy link

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

@tagliala
Copy link
Member

can you please provide a fiddle explaining the issue?

@cqcn1991
Copy link

Same problem here, any solutions?

@BreadMaker
Copy link

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
Copy link
Member

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

@aisthesis
Copy link

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
Copy link

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
Copy link
Member

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

@hamxiaoz
Copy link

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

@tagliala
Copy link
Member

tagliala commented Dec 7, 2013

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

@tagliala tagliala reopened this Dec 7, 2013
@paldepind
Copy link

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

@tagliala
Copy link
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
Copy link

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

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

image

@BreadMaker
Copy link

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
Copy link

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
Copy link
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
Copy link

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

@tagliala
Copy link
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
Copy link

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.

@robmadole
Copy link
Member

So far this appears to be working well with the SVG framework. Closing unless someone finds this to be false.

@tagliala
Copy link
Member

working well with the SVG framework

If webfonts are still affected and FA5 free will be affected too, I should label this as wontfix and advise to consider a svg solution for spinning icons

@robmadole
Copy link
Member

@tagliala agreed. I'm afraid that web fonts will always be plagued with issues around this so SVG is the best solution if this is an issue. We'll have FA5 Free out just as soon as we can.

@My1
Copy link

My1 commented Oct 20, 2017

well SVG framework isnt bad but has one annoying thing: Javascript.

there are many reasons why ppl use things like noscript to protect themselves from stuff js might do and when stuff doesnt work with JS it's ugly imo.

I mean we have things like @font-face and CSS animations and whatnot so that JS is no longer needed for tasks like these and that's a good thing.

@tagliala tagliala removed this from the 5.0.0 milestone Oct 20, 2017
@tagliala
Copy link
Member

tagliala commented Oct 20, 2017

Sorry, 😒

labeled as wontfix, but it is actually a "can't fix"

TL;DR
Please make sure that you are using a font size multiple of 16px (14px for FA4) for your spinner. It helps.
If you are not satisfied and you need a pixel perfect spinner, please consider to use an animated SVG spinner.

@PeterShaggyNoble
Copy link

@My1, you don't need JS to animate SVG, you can use CSS.

@robmadole
Copy link
Member

good call @tagliala ..."can't fix" is more accurate. I've tried multiple times :D

@tagliala tagliala added cantfix and removed wontfix labels Oct 20, 2017
@My1
Copy link

My1 commented Oct 21, 2017

well but the SVG framework will only load in a JS-enabled browser.

I tried already.

if you have FA Pro, get the demo server, disable js (easy to do in chrome) and access

http://localhost:3344/docs/svg-framework.html

you will see that no icon will load.

you can probably do the svgs alone, but my response was precisely towards the ones who said SVG Framework.

also who has this issue? I tried @tagliala 's link in Firefox chrome and opera and didnt notice much wobble (and I certainly should be able to notice anything weird in the pixels when I go like 5cm close to my 42 inch FHD Screen where you can easily see the pixels)

also foa FA5 would it become 16px then coz the base size changes?

@FreezePhoenix
Copy link

how is this a huge problem

@andreobriennz
Copy link

Using a negative text-indent value fixed the problem for me

@domenkozar
Copy link

Seems like filter: blur(0) does the job and it's very well supported https://caniuse.com/#feat=css-filters

@camslice
Copy link

camslice commented Jun 15, 2020

A combination of @andreobriennz's solution and setting line-height for each size gets pretty good results for me. Still a very slight sub-pixel wobble but basically unnoticeable.

.fa-spin {
  text-indent: -0.000001em;
  line-height: 0.6em;
}
.fa-spin.fa-lg {
  line-height: 0.7em;
}
.fa-spin.fa-2x {
  line-height: 0.8em;
}
.fa-spin.fa-3x,
.fa-spin.fa-4x,
.fa-spin.fa-5x {
  line-height: 1em;
}

@noobnoobdc137
Copy link

try
display: flex;
to <i> tag
image
Worked for me

@camslice
Copy link

@noobnoobdc137 seems to modify the rotation axis and causing the icon to spin over a very wide circle instead of on the spot. Curious about what other CSS you may have applied?

I'm using Font Awesome v4.7.0

@Alkoptantech
Copy link

Not many problems can be fixed but it looks good at first
https://www.alkoptantech.com

@Sniper-E
Copy link

Fa-spin had a very slight wobble to it on my site. But fa-pulse had a big wobble to it.

I added a .icon.fa-pulse{padding:2px 0 0 2px} and the wobble was almost completely gone. Now I need to work on fa-spin and slow that slight wobble down.

Try using .icon.fa-spin { padding: (try different numbers) } It will smooth out.

@tagliala
Copy link
Member

I added a .icon.fa-pulse{padding:2px 0 0 2px} and the wobble was almost completely gone. Now I need to work on fa-spin and slow that slight wobble down.

It also depends on the browser, so you may experience wobbling on a different browser with the same padding. Please consider an svg based icon if you need a pixel perfect spinner

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

No branches or pull requests