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?

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?

• javascript
• jquery
• google-chrome
• animation

• @Blindy Some texts work fine, but this one ending with the a or w will make the line to appear. It may be some rendering issue of Google Chrome... – RedDragon Commented Mar 12, 2012 at 20:29
• Not seeing any line on Chrome 17.0.963.79 m. – j08691 Commented Mar 12, 2012 at 20:33
• 1 @j08691 FWIW, I see it on 17.0.963.79 on mac – j_syk Commented Mar 12, 2012 at 21:27
• 1 in the future please do not use jsfiddle to show us very small amounts of CSS and HTML. If jsfiddle is down this post would be useless; please include the relevant code in the question so it is searchable and standalone. – Jeff Atwood Commented Jan 18, 2013 at 6:30
• 1 @RedDragon thank you, this is a helpful q and it is even better with the code inline, so it can help more people in the future. Also note I get similar artifacts in ie10 metro as well so it is not just chrome... – Jeff Atwood Commented Jan 18, 2013 at 16:41

3 Answers 3

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).

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 pensate).

http://jsfiddle/MqQG3/1/

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