Text "nudging" itself after css animation

Question

I'm having trouble making my animation rotate smoothly. After the element finishes rotating, you can see the text "pop" slightly to the left. Depending on the font-size this may or may not happen, but I'm hoping to find a way to solve this without having to set an exact font-size (because the fallback fonts are not the same size and will have the same problem). It also depends on the browser, it appears ok in Chrome, but in FireFox you can see this clearly.

Try this in FireFox: http://jsfiddle.net/SGVNr/ Can you see the text nudge left (on the bottom box)?

div {
    height: 100px;
    width: 100px;
    margin: 30px;
    background: blue;
    font: 29px/100px Arial, sans-serif;
    color: #fff;
    text-align: center;
}

#good {
    font-size: 30px;
}

div:hover {
    -webkit-animation: move 0.7s ease-out forwards;
    -moz-animation: move 0.7s ease-out forwards;
    animation: move 0.7s ease-out forwards;
}

@-webkit-keyframes move {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(90deg); }
}

@-moz-keyframes move {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(90deg); }
}

@keyframes move {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}

Zach Saucier · Answer 1 · 2013-10-09T18:19:52.210

2

If you remove the ID from the top and give it to the bottom it fixes the problem. Therefore, give both elements font-size:30px using a class it fixes your issue

Demo Here

EDIT

After a good bit of investigation and testing, I found that 21, 22, 25, 27, 30, 33, 34, 36, 39, 41, 43, and 45px font-size (I only tested 20-45px) all worked as you want them to with no jump left after the rotation. This behavior was true no matter what other attributes I added/removed from the style. This hints to me that it is due to some weird rendering issue with Firefox You might report it on the Firefox forums

edited Oct 09 '13 at 18:19

answered Oct 09 '13 at 03:12

Zach Saucier

24,871
12
85
147

I'm still experiencing problems after changing font-size and line-height, even if the font-size is larger than the original div's. – Sunny Oct 09 '13 at 15:57
Try this for example: http://jsfiddle.net/SGVNr/2/ For some font sizes it works for some it doesn't. – Sunny Oct 09 '13 at 16:08
Interesting, I still see the text nudge. I'm on FireFox 24. – Sunny Oct 09 '13 at 16:18
In the example you posted without changing anything you're still seeing a nudge? I updated to 24 and I don't see it. Perhaps try clearing your cache? Not sure why it'd cache something like that, but perhaps it did. And try reopening the tab perhaps – Zach Saucier Oct 09 '13 at 16:28
In http://jsfiddle.net/SGVNr/2/ I see both boxes nudge the text. I cleared cache and opened in new tab. – Sunny Oct 09 '13 at 16:42
Yep, I'm not seeing it. You're meaning a 3-5px shift of the words left after the rotation, correct? – Zach Saucier Oct 09 '13 at 17:23
That's correct. I asked a few other people to check to make sure, and they also see the text shift to the left by 2 or 3 px. – Sunny Oct 09 '13 at 17:34
@Sunny It acts as you described on my other computer. This is quite a particularly weird issue, I'd recommend posting on the Firefox forums about it. I updated my answer as well – Zach Saucier Oct 09 '13 at 18:20
@Sunny Did you ever end up resolving the issue? I'm curious – Zach Saucier Oct 25 '13 at 15:57
1

I haven't tested this thoroughly, but I believe I found a solution by adding ``filter: url("data:image/svg+xml;utf8,#grayscale");`` to the rotated element. http://jsfiddle.net/SGVNr/3/. Note: If the element isn't rotated the filter will blur the text, but this should be easy to work around by only applying the filter when you rotate.Here's another example before filter: http://jsfiddle.net/42y89/ After: http://jsfiddle.net/42y89/2/ – Sunny Oct 26 '13 at 03:25
@Sunny know this is a old question but care to explain (if you know or how you found out) why this filter does the trick? – Mathias W Jul 07 '16 at 16:01
1

somehow `filter: blur(0);` works also, found it in [this answer](https://stackoverflow.com/a/28565387) – Razor Jun 13 '17 at 02:54
I'm guessing that filters force Firefox to pay more attention and get the rendering right – Zach Saucier Jun 13 '17 at 04:42

Text "nudging" itself after css animation

1 Answers1