Fix blue line on Google Chrome

Question

I have the following HTML:

<div id="a"><div id="b">aga ad gdas ga gs ds da dgs sd ds dg gdgsdgwa</div></div>

And CSS:

#a, #b {
    position: absolute; 
    height: 10px;
    font-size: 10px;   
    white-space:nowrap;
    display: block;
}
#a {
    width: 200px;   
    overflow: hidden;
}

And Javascript:

var x = 0;

setInterval(function() {
    if ($('#b').position().left < (-$('#b').width())) {
        x = 305;
    }
    $('#b').css('left', (x--) + 'px')
}, 50);

Which runs fine in Firefox and Internet Explorer, however on Google Chrome 17 it shows a blue line at the end of the sentence. See live jsfiddle demo.

How can I fix it?

Answer 1

I had a similar problem and solved it using Math.floor() to integerise my width, height and background-size properties...

Answer 2

I'm pretty sure that it's a font redraw/rendering glitch. I've seen it in Java. It probably has little to do with your JS and CSS (fortunately and unfortunately).

The trick is to force it to redraw where the streak is being made. Fortunately, that's easily fixed in this scenario: just add padding-right:1px; to the #b element.

---

Edit: You may want to consider submitting this bug to Google/Apple (as the problem occurs in both Chrome and Safari).

Answer 3

Interestingly, the lighter the BG color, the lighter the erroneous blue line. Font-smoothing did not fix it.

1px padding-right fixes it (I added -1px margin-right to compensate).

http://jsfiddle.net/MqQG3/1/