Fix niebieska linia na Google Chrome

Question

Mam następujące HTML:

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

i CSS:

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

i JavaScript:

var x = 0; 

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

który działa dobrze w Firefox i Internet Explorer jednak w przeglądarce Google Chrome 17 pokazuje niebieską linię na końcu zdania. See live jsfiddle demo.

Jak mogę to naprawić?

Answer 1

Jestem prawie pewien, że jest to przerysowanie czcionek/usterka renderowania. Widziałem to w Javie. Prawdopodobnie ma to niewiele wspólnego z twoimi JS i CSS (na szczęście i niestety).

Sztuką jest zmuszenie go do przerysowania miejsca, w którym tworzona jest smuga. Na szczęście można to łatwo naprawić w tym scenariuszu: wystarczy dodać padding-right:1px; do elementu #b.

---

Edytuj: Możesz rozważyć przesłanie tego błędu do Google/Apple (ponieważ problem występuje zarówno w przeglądarce Chrome, jak i Safari).

Answer 2

Co ciekawe, im jaśniejszy jest kolor BG, tym jaśniejsza jest błędna niebieska linia. Font-smoothing nie naprawił tego.

1px padding-right naprawia (dodałem -1px margin-right, aby to zrekompensować).

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

Answer 3

miałem podobny problem i rozwiązać go za pomocą Math.floor(), aby integerise moje szerokość, wysokość i background-size właściwości ...