Schriftart sieht verschwommen nach übersetzen in Chrome

BEARBEITEN 2016-07-04 (Da diese Frage immer beliebter wird): This is a bug in Chrome. Entwickler sind actively working on a fix.Schriftart sieht verschwommen nach übersetzen in Chrome

EDIT 2017.05.14 Der Fehler behoben zu sein scheint, das Update wird in Chrome 60

eingeführt werden, so habe ich diese sehr hässlich aussehende Fenster, das auf dem Bildschirm dieses CSS zentriert ist:

.popup 
{ 
    position: fixed; 
    top: 0; 
    bottom: 0; 

    transform: translate(-50%, -50%); 
}

jedoch es wie folgt auf Chrome sieht (die Schrift sieht wirklich verschwommen):

Aber wie diese auf Firefox:

Wenn ich die transform Regel zu entfernen, wird der Text sieht nett aus und wieder knusprig, aber dann ist es nicht mehr richtig zentriert.

Wenn ich zu chrome://flags gehen und #disable-direct-write ausführen, sieht es netter aus, aber Benutzer werden offensichtlich nicht tun, und es löst das Problem nicht.

Wie kann ich meine Schrift gut aussehen lassen, während das Fenster zentriert ist?

Mein Chrom-Version ist 44.0.2403.155

Ich habe eine three.js Demo mit WebGL, die auf einem Hintergrund Leinwand macht. Wenn ich die Demo deaktiviere, tritt das Problem nicht mehr auf.

JSFiddle with the background.

JSFiddle without the background.

Quelle

2015-08-16 joppiesaus

Subpixel-Rendering ..... können Sie eine definierte Breite haben für '.popup'? –

@ DanielA.White Ich habe keine definierte Breite für '.popup'. – joppiesaus

können Sie? Wenn Sie das tun, können Sie es auf andere Weise zentrieren. –

fand ich heraus, -webkit-filter: blur(0) könnte Ihre verschwommene Schriftart in Chrome unter Windows beheben:

JSFiddle

#projectPopup { 
    ... 
    -webkit-filter: blur(0); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

Quelle

2015-08-18 09:54:56

Nun, [es repariert die verschwimmen] (http://i.imgur.com/diz8 N9i.png). – joppiesaus

@joppiesaus oh, es ist seltsam (. Es ist OK in meinem Chrome 44 unter Windows 7/8.1/10, OS X, Ubuntu 14.04, etwas wie [dies] (http://oi60.tinypic.com/jpy8sx.jpg). Welches Betriebssystem benutzt du? Ist [dieses Snippet] (http://jsfiddle.net/sergdenisov/8vfz9m29/2/) auch abgestürzt? –

Es liegt wahrscheinlich daran, dass ich Chrome 45 jetzt benutze.Ich teste es unter Linux mit die neuste stabile Version (44), ich bin mir sicher, dass das in Ordnung sein wird – joppiesaus

Verwenden Sie eine Normalisierung der Transformation nach der Animation:

Transform X/Y normalization

Or Wir skalieren die Textur mit Zoom-Double und skalieren sie dann wieder runter. In einigen Fällen kann dies aufgrund anderer komplexer Transformationen oder Übersetzungen nicht angewendet werden und ist nicht perfekt.

...{ 
zoom:2; 
-webkit-transform: scale(0.5); 
transform: scale(0.5); 
}

Quelle

2016-03-09 13:24:25 Miguel

zoom: 1.05; hilfe für mich – Experimenter

'scale' und' translate' mischen sich nicht wirklich Dies hat meinen Text zu sehr nach unten verschoben – trysis

Problem in der Hälfte des Pixels.

Versuchen: transform: translate(-50%, -51%);

Es funktioniert!

Quelle

2016-08-10 13:42:07

Nein funktioniert es nicht, es könnte auf eine bestimmte Situation und spezifische Auflösung netter aussehen, aber das ist keine Lösung für das Problem. – joppiesaus

Gib mir ein Beispiel, wenn es nicht funktioniert. Dieses Problem gibt es nur in Chrome. Ich sah viele Lösungen wie ' translateZ (0) 'oder' perspective: 1000px' oder 'z-index: 1'. Idee, das Layout auf eine andere Ebene zu verschieben r. Aber Problem in vielen Fällen, wenn Sie 'scale (1.1)' oder 'translateX (-50%)' nicht genug verwenden: 0.5px und Browser, der Text wie undeutlich macht. In vielen Fällen können Sie die Höhe des aktuellen Tags ändern (1px hinzufügen). –

-1

habe ich versucht, jede Lösung und nur das für mich arbeitet (Chrom 53)

dialog { 
    position: fixed; 
    top: 50%; 
    transform: translate(0, -50%); 
}

Quelle

2016-09-28 19:38:01

Schriftart sieht verschwommen nach übersetzen in Chrome

Antwort

Verwandte Themen