transform: translateX verursacht Text Unschärfe

Ich bin verrückt geworden und habe noch keine Lösung gefunden, jeder Inhalt in der div wird aus irgendeinem Grund verwaschen, wenn eine transform angewendet wird. Obwohl dies nur in Chrom passiert.transform: translateX verursacht Text Unschärfe

Ich habe versucht, mit der Deklaration Webkit Stil: -webkit-font-smoothing, aber ich war nicht erfolgreich.

Die div CSS:

#divId { 
     width: 100%; 
     height: 100%; 
     -webkit-transform: translateX(-52%); 
     transform: translateX(-52%); 
}

unten sind 2 Bilder der Differenz mit und ohne die transform zeigt, die erste ist, mit zu transformieren und die zweite ist, ohne dass die zu transformieren.

dank

Quelle

2016-06-22 Jay Mar

Ich sehe keinen signifikanten Unterschied zwischen diesen 2 Bildern. –

Wie erwartet, ist der x-Offset einiger Glyphen aufgrund der Transformation leicht unterschiedlich. Beide Bilder sind Anti-Aliasing und beide haben eine ähnliche Schärfe. – roeland

@roeland Just Aktualisiert die Bilder, Sie können jetzt deutlich die Unterschiede sehen. –

versuchen, die div bewegen ohne
zu verwandeln wie mit {position: relative; links: -52%;}
Transformation ändert sich in der Regel um die Qualität eines Textes oder img (wie übersetzen oder skalieren) und soweit ich weiß gibt es keine 100% genaue Arbeit um diese

Quelle

2016-06-22 11:10:50

transform: translateX verursacht Text Unschärfe

Antwort

Verwandte Themen