Fix đường màu xanh trên Google Chrome

Question

Tôi có HTML sau:

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

Và CSS:

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

Và Javascript:

var x = 0; 

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

nào chạy tốt trong Firefox và Internet Explorer Tuy nhiên, trên Google Chrome 17 nó hiển thị một dòng màu xanh ở cuối câu. See live jsfiddle demo.

Làm cách nào để khắc phục sự cố?

Answer 1

Tôi khá chắc chắn rằng đó là phông chữ vẽ lại/hiển thị trục trặc. Tôi đã thấy nó trong Java. Nó có thể có ít để làm với JS và CSS của bạn (may mắn thay và không may).

Bí quyết là bắt buộc phải vẽ lại khi vạch đang được tạo. May mắn thay, điều đó dễ dàng được sửa trong kịch bản này: chỉ cần thêm padding-right:1px; vào phần tử #b.

---

Chỉnh sửa: Bạn có thể xem xét gửi lỗi này tới Google/Apple (vì sự cố xảy ra ở cả Chrome và Safari).

Answer 2

Điều thú vị là màu BG nhạt hơn, dòng màu xanh sai lệch càng sáng. Font-smoothing không khắc phục được.

1px padding-right sửa lỗi (Tôi đã thêm -1px margin-right để bù trừ).

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

Answer 3

Tôi đã có một vấn đề tương tự và giải quyết nó bằng cách sử Math.floor() để integerise chiều rộng, chiều cao và nền kích thước tài sản của tôi ...