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?

Just a note couldn't get the animate to work in IE 9 compatibility mode. — Henesnarfel, Feb 13 '12 at 15:33
Seems like the italics causes it for me. Removing it also removed the artifacts. — j08691, Feb 13 '12 at 15:40

welldan97 · Accepted Answer · 2012-02-13T18:12:28.823

5

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.

edited Feb 13 '12 at 18:12

answered Feb 13 '12 at 15:31

welldan97

3,071
2
24
28

For some reason it only works with a padding of 2px or more; 1px doesn't do the trick... – bravokiloecho Feb 13 '12 at 15:40

score 1 · Answer 2 · answered Feb 13 '12 at 15:30

1

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/

answered Feb 13 '12 at 15:30

jfriend00

683,504
96
985
979

doesn't work in Safari 5. Still got the beginning line on the A – Henesnarfel Feb 13 '12 at 15:36
Yeah, I still get the problem in Chrome and Safari – bravokiloecho Feb 13 '12 at 15:38
Odd, in my Chrome it worked with 1px. Perhaps it depends upon the exact font selected/rendered. – jfriend00 Feb 13 '12 at 15:46

Glitchy text animation in jQuery

2 Answers2