Frage Unscharfer Text nach Verwendung der CSS-Transformation: scale (); in Chrome


Scheint so, als ob ein kürzlich aktualisiertes Google Chrome-Update zu verschwommenem Text geführt hat transform: scale(). Speziell mache ich das:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Wenn Sie besuchen http://rourkery.com In Chrome sollten Sie das Problem im Haupttextbereich sehen. Es hat dies nicht getan und es scheint nicht zu anderen Webkit-Browsern (wie Safari) zu beeinflussen. Es gab einige andere Posts über Leute, die ein ähnliches Problem mit 3D-Transformationen hatten, aber nichts über 2D-Transformationen wie dieses finden können.

Irgendwelche Ideen würden geschätzt, danke!


75
2018-02-03 21:26


Ursprung


Antworten:


Ich habe dieses Problem einige Male und es gibt 2 Möglichkeiten, es zu beheben (siehe unten). Sie können eine dieser Eigenschaften verwenden, um das Rendering oder beide gleichzeitig zu korrigieren.

Die versteckte Rückseitensichtbarkeit behebt das Problem, da sie die Animation nur an der Vorderseite des Objekts vereinfacht, während der Standardzustand die Vorder- und Rückseite ist.

backface-visibility: hidden;

TranslateZ funktioniert auch, da es ein Hack ist, um der Animation Hardwarebeschleunigung hinzuzufügen.

transform: translateZ(0);

Beide Eigenschaften beheben das Problem, das Sie haben, aber einige Leute fügen auch hinzu

-webkit-font-smoothing: subpixel-antialiased;

zu ihrem animierten Objekt. Ich finde, dass es das Rendering einer Webschrift ändern kann, aber fühlen Sie sich frei, mit dieser Methode auch zu experimentieren.


49
2018-06-02 00:24



Anstatt von

transform: scale(1.5);

verwenden

zoom : 150%;

behebt das Problem der Textunschärfe in Chrome.


9
2018-02-28 19:56



Ich fand, dass die Anpassung des Maßstabsverhältnisses leicht half.

Verwenden scale(1.048) Über (1.05) schien eine bessere Annäherung an eine Gesamtpixelschriftgröße zu erzeugen, wodurch die Subpixelunschärfe reduziert wurde.

Ich habe es auch benutzt translateZ(0) Dies scheint den letzten Rundungsschritt von Chrome in der Transformationsanimation anzupassen. Dies ist ein Vorteil für meine On-Over-Nutzung, da es die Geschwindigkeit erhöht und das visuelle Rauschen reduziert. Für eine Onclick-Funktion würde ich sie jedoch nicht verwenden, da die umgewandelte Schrift nicht so knusprig aussieht.


6
2018-02-03 22:46



Sunderls führte mich zur Antwort. Außer filter: scale existiert nicht, aber filter: blur tut.

Wende die nächsten Deklarationen auf die Elemente an, die unscharf erscheinen (in meinem Fall waren sie in einem transformierten Element):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Es fast hat perfekt funktioniert. "Fast"Weil ich einen Übergang verwende und während des Übergangs sehen die Elemente nicht perfekt aus, aber sobald der Übergang abgeschlossen ist, tun sie es.


5
2017-12-10 18:25



Zur Verbesserung der Unschärfe, insb. Versuchen Sie in Chrome Folgendes:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

4
2017-12-05 20:51



Dies muss ein Bug mit Chrome (Version 56.0.2924.87) sein, aber das Folgende behebt die Unschärfe für mich, wenn ich CSS-Eigenschaften in der Konsole ändere ('. 0'). Ich werde es melden.

filter: blur(.0px)

4
2018-03-31 10:34



Versuchen Sie es mit zoom: 101%; für komplexe Designs, wenn Sie eine Kombination aus Zoom + Skalierung nicht verwenden können.


3
2017-09-30 07:17



In meinem Fall verursachte folgender Code eine unscharfe Schrift:

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

und nur das Hinzufügen der Zoom-Eigenschaft hat es für mich korrigiert. Herumspielen mit Zoom, folgendes funktioniert für mich:

zoom: 97%;   

2
2018-01-04 17:10



Ich fand heraus, dass das Problem in irgendeiner Weise auf relativen Transformationen auftritt. translateX (50%), Maßstab (1.1) oder was auch immer. absolute Werte zu liefern funktioniert immer (erzeugt keinen verschwommenen Text).

Keine der Lösungen erwähnt hier funktioniert, und ich denke, es gibt noch keine Lösung (mit Chrome 62.0.3202.94, während ich dies schreibe).

In meinem Fall transform: translateY(-50%) translateX(-50%) verursacht die Unschärfe (ich möchte einen Dialog zentrieren).

Um ein bisschen mehr "absolute" Werte zu erreichen, musste ich Dezimalwerte auf setzen transform: translateY(-50.09%) translateX(-50.09%).

HINWEIS

Ich bin mir ziemlich sicher, dass diese Werte auf verschiedenen Bildschirmgrößen variieren. Ich wollte nur meine Erfahrungen teilen, falls es jemandem hilft.


1
2017-11-29 08:27