Advanced CSS, How to center exactly this font-awesome 4 animation?

HTML & CSS
1

Is there someone really good in CSS that can fix this? Thanks!

I made a codepen:

You can only see the animation if you disable CORS. There are add ons that can do that.
Or if you are on Linux, you can use those flags on Crrome:
google-chrome --disable-web-security --user-data-dir=~/tmp/chrome

The problem:
There are 2 animations. One using pure font-awesome 4. Another, using a small change inspired from font-awesome 5. See the rotate(1turn) instead of rotate(359deg). I have an optical impression that the solution with 1turn is slightly better. But it still has a little of shifting.

In firefox and Edge, the shifting is stronger.

But if you add transform: scale(5,5), you can see that the center of all circles are not centered. They move slightly. Like if the rotation was not properly centered.

I observed that this icon depends on em. And maybe this em is different between browsers.

The center of each black circle should remain at a fixed position.

Do you know why this happens and do you have a fix?

It is not possible to see how it is in font awesome 5 because that specific icon was removed and replaced by other graphical ideas.

2

Hi there tvilmart,

it might be helpful if we could see the
actual code that goes in hereā€¦

.fa-spinner:before {
    content: "ļ„";
}

ā€¦rather than that strange symbol. :winky:

Itā€™s probably similar to this - \fxxxx

coothead

4

Thanks for the help.
.fa-spinner:before{content:ā€œ\f110ā€}
from the free version of font awesome that we use and that is fully open source.
The code refers to the font files. ANd you need to disable CORS.

5

Sorry Iā€™m not doing that but is there any chance you can put the demo online so we can see the actual icons you are using and will be easier to debug? :slight_smile:

6

In the next answer, I could publish the demo online.

Just curious. Why you do not want to install a CORS-disabling add-on?

It is quite hard to serve a webserver on the whole planet. Even on azure cloud, you need several things, CDN, storage site, etc.

Thierry

7

I just found an online demo that is full without extra add ons. However, my codepen is better because it uses turn(1) instead of 359deg with a clearly perceptible visual improvement, though incomplete.

Just look for that element with the class and you will see it has the defect. the bottom circle does not have a constant center. You will need to edit the keyframes rule with ā€œturn(1)ā€.
class=ā€œfa fa-spinner fa-pulse fa-3x fa-fw margin-bottomā€

8

Hi,

I must admit I wouldnā€™t notice the wobble even when zoomed very large as most of it seems to be an optical illusion in some respects. The dots are not perfectly spaced and are different sizes so that you think they are wobbling more than they do. When they are rotated the individual dots are not rotated to the exact centre of the next dot so you get a wobble effect. If you didnā€™t animate in steps it would be less obvious.

However saying all that I do notice a slight wobble on the :before element when rotated and it moves a pixel up and left as it rotates. I think you need to set a width that matches the font-size and use inline-flex instead of inline-block as it is more reliable.

e.g.

.div1 .fa-stack{
  display:inline-flex;
  width:20px;
  height:20px;
}

If you add a background to the :before element it is easier to see when it rotates perfectly.

.fa:before{
  border-radius:50%;
  background:red;
}

I have put a demo here with the above in place and the page scaled.

As you can see the red circle which is spinning does not wobble at all.

Hope thatā€™s of some use :slight_smile:

9

Many thanks. I need time to study this.

Note that certains browser have more problems, edge is the worse.

1 Like
10

I did some interesting observations.

With your solution, and a height of 19.7px, the animation becomes much better, almost 99% perfect. See the codepen I sent, I updated it.

I had to use a scale(20) to decide that 19.7px was better than 19.75px. But its very hard to see.

You will see the red disk is not centered any more but the animation become centered. It is like if it cancells the shifting and applies it to the containing rectangle, in a relative mirroring effect. I observed that width cahnged nothing. height accentuates, and I found a sort of threshold.

I will experiment more. Then I will contact font-awsome to put back their animation in their lot. Maybe this lack of centing is why they removed it in the version 5.

It really feels like a defect in Edge with strong shifting.

11

I am impressed you were able to fix this. I was very confused by this CSS.

Why does inline-flex work better than inline block?
Why did you not want to use the disable cors add-on?

12

I send this to fontawesome:

" Hi, there is an animation in font-awesome version 4 that was removed from version 5, called .fa-spinner. It is visible at the link below. It has a defect in that it is not perfectly centered. In certain browsers like edge the defect looks ugly.

I could fix this defect in the codepen below. Maybe the fdefect is why you removed the animation from the version 5. Anyways you ahve the solution now.

The code pen is only visible if you install an add on that disables CORS. There is one in firefox.

The animation to the extreme right looks perfect.

The fix involves:

using turn(1) instead of 359deg

using .fa-stack with a height of 19.7px.

and using fa-stack with a display: inline-flex."

13

It doesnā€™t get skewed by the oversized line-height.

If I added every extension that everyone asked for Iā€™d need a bigger computer. :slight_smile:

Besides only last month one of the extensions crashed and froze the whole computer (even after restart). I had to wipe the whole disk and restore from my Mac time machine backup. Iā€™m also adverse to installing extensions that go against what the browser wants to do. However I did install the CORS extension on Chrome so I could test but have removed it now.:slight_smile:

14

Interesting thanks. Yes the line-height affected the result.

1 Like
15

It looks 99% perfect with the solution I described, both with scale and without. The scale transform does not seem to affect the result. Only how clear it becomes to the eye.

However, If you zoom in in the browser, or if you zoom out, then the defect comes again and is accentuated. And at a certain zoom level, one can adjust the hight where I have put 19.7px, and adjusting it it becomes good again.

it seems that zooming in or out forces the font to look different.

Why does this happen and do you have a fix?
Note that certain things in the animation use the em unit. But I think I have overriden them, but I am not sure.

16

Iā€™ll have another look a bit later when I have some spare time but you canā€™t really control the browser zoom. Itā€™s not meant to be 100% perfect when you zoom as pixels will be rounded up or down so there can never be a perfect fit. (Most users zoom a page so that they can read the text and donā€™t really care about the display so much. I know of few people who actually have the site zoomed at all times unless it was by accident ;))

Thereā€™s little you can do about controlling zoom other than not relying on pixel perfection. Sometimes changing things a little can help but its more a matter of trial and error and what works in one browser often breaks it in another.

Sometimes you just have to let go :slight_smile:

Or use an svg image as your loader and not a font :slight_smile:

17

I use the zoom all the time. Even on this forum, I am more confortable with bigger text.

Yes 99% perfect is enough. But with zooming it is far from 99% perfect. maybe 80%.

What is strange is that any zoomed state can be fixed by chainging the height.

Using svg could work. It is probably the best. I know how to make svg images in gimp. But it would take me lots of time to learn svg animations.

18

The problem with fonts is that they are made with space around the glyphs and you get a half-leading on top and bottom but depending on the glyph you may have 3px at the top and 2px at the bottom meaning that when you spin it you are a pixel out at opposite ends. There is also the issue of line-height and if you have a an odd px line-height then you donā€™t have an exact middle. That is all then compounded when you zoom and pixels get rounded up and down but not all at the same rate.

Itā€™s bouncing around like mad for me (mac Chrome) which is due to the 19.7px size you added instead of 20px as it should be. That will most likely get rounded down to 19px or if the browsers is doing sub pixel aliasing it still wonā€™t be 20px. They two on the right look perfect to me if I change it to 20px and set the line-height to 20px (the first one use inline-block and still makes a concentric circle). You really want the line-height to be the same size as the spinner.

The old codepen example of mine looks more or less perfect. :slight_smile:

If I make those changes to your pen then this looks perfect for all 3 in my Chrome Mac.

You need to look at the red circle to see whether it moves or not. As I said before when the element is rotated in steps a previous little dot overlays another dot but the dots arenā€™t placed at the same exact points in the circle (and get bigger) so you get a little side to side appearance but this is nothing to do with it being off centre. If I zoom it still looks good. This may be helped by the display on the mac of course.

You can use much the same code as you already have as you are spinning the whole thing and not animating the paths of the svg.

Iā€™d probably go with some css solutions like these.

https://matejkustec.github.io/SpinThatShit/

Yes so am I at 68 years old and need glasses to read everything but when I zoom to read I just zoom the text and not the whole page because I want bigger text only and not bigger everything else :wink:

2 Likes
19

Hi there tvilmart,

the problem with the ā€˜fontawesome thingyā€™
is that it is not actually circular but about
3.66% higher than it is wide. :eek:

Here is an example - ( 224 x 232 )

spinner

Would you like me to attempt a SVG alternative?

coothead

1 Like
20

@coothead is really an SVG fan hehe. Iā€™m trying to get my head wrapped around them, but havenā€™t used them yetā€¦least, not much. Dunno why Iā€™m afraid of them lol :sweat_smile:

21

Thanks for backing me up :slight_smile:

3 Likes