Fissare linea blu su Google Chrome

Ho il seguente codice HTML:Fissare linea blu su Google Chrome

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

e CSS:

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

e JavaScript:

var x = 0; 

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

che corre bene in Firefox e Internet Explorer , tuttavia su Google Chrome 17 mostra una linea blu alla fine della frase. See live jsfiddle demo.

Blue line on Google Chrome

Come posso risolvere il problema?

fonte

2012-03-12 RedDragon

Che un problema strano ... – Blindy

@Blindy Alcuni testi funzionano bene, ma questo che termina con 'a' o' w' farà apparire la linea. Potrebbe trattarsi di un problema di rendering di Google Chrome ... – RedDragon

Impossibile visualizzare alcuna riga su Chrome 17.0.963.79 m. – j08691

Sono quasi sicuro che si tratta di un ridisegno di font/rendering glitch. L'ho visto in Java. Probabilmente ha poco a che fare con il tuo JS e CSS (fortunatamente e sfortunatamente).

Il trucco è forzarlo a ridisegnare dove viene eseguita la striscia. Fortunatamente, questo è facilmente risolto in questo scenario: basta aggiungere padding-right:1px; all'elemento #b.

Edit: Si può prendere in considerazione l'invio di questo bug per Google/Apple (come il problema si verifica sia in Chrome e Safari).

fonte

2012-03-12 20:31:26

Questo funziona. Per favore aggiusta il padding: diritto al padding-right in quanto non mi permette di inviare una richiesta di modifica cambiando solo un carattere alla risposta. – RedDragon

@RedDragon Whups. Grazie per aver menzionato questo errore. –

il denominatore comune non sarebbe WebKit? –

È interessante notare che, più leggero è il colore BG, più leggero è l'errata linea blu. Font-smoothing non ha risolto il problema.

1px padding-right lo corregge (ho aggiunto -1px margin-right per compensare).

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

fonte

2012-03-12 20:34:08

Il livellamento dei caratteri risolverebbe solitamente un problema come questo? –

@JeffreySweeney: potrebbe. Sembra che il problema sia correlato a un pixel di bordo anti-alias finale di un carattere; in teoria cambiare il tipo di smoothing potrebbe modificarlo. –

Inoltre, se si ingrandisce, sembra effettivamente un singolo punto dal bordo di un serif alla linea di base del font. –

Ho avuto un problema simile e risolto utilizzando Math.floor() per integerise miei larghezza, altezza e background-size proprietà ...

fonte

2013-12-16 09:44:45 Kevin

Fissare linea blu su Google Chrome

risposta

Problemi correlati