Исправить синюю линию в Google Chrome

Question

У меня есть следующий HTML:

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

И CSS:

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

И Javascript:

var x = 0;

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

Что отлично работает в Firefox и Internet Explorer, однако в Google Chrome 17 в конце предложения отображается синяя линия. Смотрите живую демоверсию jsfiddle .

Как я могу это исправить?

Answer 1

Я почти уверен, что это сбой перерисовки / рендеринга шрифта.Я видел это на Яве.Вероятно, это имеет мало общего с вашими JS и CSS (к счастью и к сожалению).

Хитрость заключается в том, чтобы заставить его перерисовываться там, где делается полоса.К счастью, это легко исправить в этом сценарии: просто добавьте padding-right:1px; к элементу #b.

---

Редактировать: Вы можете рассмотреть вопрос об отправке этой ошибки в Google / Apple (поскольку проблема возникает ви Chrome, и Safari).

Answer 2

Интересно, что чем светлее цвет BG, тем светлее синяя линия. Сглаживание шрифтов не исправило это.

1px padding-right исправляет его (я добавил -1px margin-right для компенсации).

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

Answer 3

У меня была похожая проблема, и я решил ее, используя Math.floor (), чтобы объединить мои свойства width, height и background-size ...