Firefox and CSS3 Animations - Why is my text wobbling?

Question

Example link: http://jsfiddle.net/kArnq/1/

In Webkit, the text animates perfectly. No issues.

In Firefox, though, the characters jiggle a bit as they scroll. That is, the space between characters shifts slightly as they scroll.

My guess would be that it's a rounding issue with the calculated position of each character, but I'm hoping there's a way around it.

Any thoughts?

/edit: Here's an animated gif of what's happening (this happens when the text is moving. I just took two screenshots and overlaid them, so you could see what I'm seeing).

https://i.stack.imgur.com/eQR4H.gif

jiggle... as in the slight horizontal jerking, as if something had stopped the letters for a very short period? — Marc B, Sep 24 '12 at 20:54
Almost, but not quite. More like the letters are shifting position _relative to one another_ as they scroll. Like their kerning (letter spacing, basically, for anyone that doesn't know) is changing slightly. "Jiggle" is the best word I can think of for the visual effect. "Wobble", maybe? — Justin Ross, Sep 24 '12 at 21:11
gotcha. I don't get that on FF15.0.1 here. There's hiccups in the animation, but no inter-character jiggling. — Marc B, Sep 24 '12 at 21:26
Seconding Marc B's comment, and the animation hiccups go away after a bit. Try updating FF to the newest version (It's got cool new features you'll enjoy anyway). — Ben Schwabe, Sep 24 '12 at 21:37
Unfortunately, I'm on 15.0.1. :( http://i.imgur.com/JEPml.png - Ah well, thanks anyhow! — Justin Ross, Sep 24 '12 at 21:41

score 0 · Answer 1 · edited May 23 '17 at 12:14

I try to use transform and for me works better:

#foo b{
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-duration:10s;
    -moz-animation-name: scroll;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration:10s;
    -webkit-animation-name: scroll;
    white-space: nowrap;
    font-size: 6em;
    display:block;
    -moz-transform:  translateX(0px);
}

@-moz-keyframes scroll {
    0% {-moz-transform: translateX(0px);}
    100% {-moz-transform: translateX(-620px);}
}

have a look to this question Improving CSS3 transition performance

Firefox and CSS3 Animations - Why is my text wobbling?

1 Answers1