http://jsfiddle.net/danielcgold/SYgzJ/di ingresso del campo lasciando manufatti transizione CSS3 (in Chrome 15)
Quando si fa clic sull'ingresso poi andare sulla sfocatura, manufatti sono lasciati sullo schermo in Chrome 15. Ho notato questo problema in un sito i Ho sviluppato così ho eliminato tutto, ma solo il campo di input e un pulsante. Quando rimuovo il pulsante, la transizione avviene perfettamente. Qualche idea?
Aggiungi il CSS per il vostro campo di input:
input {
-webkit-transform: translate3d(0,0,0)
}
Questo forzerà Chrome di utilizzare il GPU per fare tutto il rendering, che risolverà il problema manufatti e fai soffocare le tue animazioni.
Questo ha funzionato. Quando ho applicato questa proprietà al mio blocco di stile in cui ho impostato tutte le mie transizioni, ha rotto qualcosa nel mio layout. Ho appena impostato questa proprietà attraverso una classe e ha funzionato! – Dan
Ciò può causare un altro problema: z-index potrebbe essere incasinato. [Vedi qui per gestirlo] (http://stackoverflow.com/questions/6953497/webkit-transform-overwrites-z-index-ordering-in-chrome-13). –
fantastico !! Grazie! – thinklinux
Questo è un bug nel rendering di Chrome delle transizioni CSS. Ma è possibile aggirarlo forzando l'operazione di "aggiornamento" dell'elemento. Si prega di notare che è necessario aggiornare non l'elemento input, ma è genitore, in modo che il codice riportato di seguito vi aiuterà a:
$(document).ready(function(){
$('#test').blur(function(){
$(this).parent().addClass('repaint');
});
$('#test').focus(function(){
$(this).parent().removeClass('repaint');
});
});
E repaint classe dovrebbe avere qualcosa legato alla vista dei genitori, ad esempio colore diverso:
.repaint {
color: red;
}
Ma è possibile sostituire color con visibility o altro attributo relativo alla vista (ma non importante/visibile per i genitori).
Ecco jsfiddle per illustrare la soluzione
ottimo pensiero +1 – Jashwant
Questo non ha funzionato, ho provato ad applicare la classe agli elementi animati e al corpo usando il callback 'jQuery' e' promise(). Done() 'La soluzione' translate3d' ha funzionato ... –
Ho avuto un problema simile con gli artefatti delle finestre in Safari e ho trovato che aggiungere -webkit-transform:scale(1); alla regola di attivazione risolve il problema.
Vedere http://jsfiddle.net/SYgzJ/48/ - dovrebbe funzionare ora.
Come ha detto Cesar, -webkit-transform: translate3d(0,0,0); lo risolverà, ma può influire anche sul rendering del testo.
Probabilmente un bug di rendering di Chrome. – Kyle
Ce l'ho anche senza il pulsante, strano –
Sicuramente un bug di Redraw/Repaint. – c69