Glitchy text animation in jQuery

Question

I have text links which change colour on hover with CSS and shift left with jQuery.

Most of the time it works fine, but when the text begins with a capital "A", say, it leaves a weird trail behind the text character. This happens in webkit broswers (but not Firefox).

You can see it in action with this jsFiddle

Is there any way to get rid of this glitch?

Answer 1

wow, my first feeling was right: add a small padding to the sides and it work fine: http://jsfiddle.net/k3vnd/1/

Not sure how to explain it, just reminds bugs from programming background. I think it's internal webkit issue.

Answer 2

I don't know why it does that, but putting a small amount of padding around the link seems to solve the issue:

.links {

    position:absolute;
    left:20px;
    margin-top:25px;
    font-size:16.5pt;
    font-family: Garamond, Palatino, sans serif;
    font-style:italic;
    padding: 1px;    /* <=== added this line */

}​

See it work here: http://jsfiddle.net/jfriend00/LvT2h/