it-swarm.com.de

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

Anscheinend gab es ein kürzlich aktualisiertes Update für Google Chrome, das nach transform: scale() zu verschwommenem Text führt. 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 http://rourkery.com in Chrome besuchen, sollte das Problem im Haupttextbereich angezeigt werden. Früher hat es das nicht getan und es scheint keine Auswirkungen auf andere Webkit-Browser (wie Safari) zu haben. Es gab einige andere Beiträge über Menschen, die ein ähnliches Problem mit 3D-Transformationen hatten, konnten aber nichts über 2D-Transformationen wie diese finden.

Alle Ideen wären dankbar, danke!

79
Ryan O'Rourke

Ich habe dieses Problem mehrmals und es gibt zwei Möglichkeiten, es zu beheben (siehe unten). Sie können eine dieser Eigenschaften verwenden, um das Rendern zu korrigieren, oder beides gleichzeitig.

Die Sichtbarkeit der rückseitigen Oberfläche behebt das Problem, da die Animation nur auf die Vorderseite des Objekts vereinfacht wird, während der Standardzustand die Vorder- und Rückseite ist.

backface-visibility: hidden;

TranslateZ funktioniert auch als Hack, um der Animation Hardwarebeschleunigung hinzuzufügen. 

transform: translateZ(0);

Beide Eigenschaften beheben das Problem, das Sie haben, aber einige Leute möchten auch hinzufügen 

-webkit-font-smoothing: subpixel-antialiased;

zu ihren animierten zum Objekt. Ich finde, dass dies die Darstellung einer Webschriftart ändern kann, aber auch mit dieser Methode experimentieren kann.

57
2ne

Ich fand, dass das Anpassen des Maßstabs etwas half.

Die Verwendung von scale(1.048) über (1.05) schien eine bessere Annäherung an die Schriftgröße eines ganzen Pixels zu erzeugen, wodurch die Unschärfe der Subpixel verringert wurde.

Ich habe auch translateZ(0) verwendet, was anscheinend den letzten Rundungsschritt von Chrome in der Transformationsanimation einstellt. Dies ist ein Plus für meine Onhover-Nutzung, da sie die Geschwindigkeit erhöht und das Bildrauschen reduziert. Für eine Onclick-Funktion würde ich sie jedoch nicht verwenden, da die transformierte Schrift nicht so knusprig erscheint.

12
Jordan Nakamoto

Anstatt 

transform: scale(1.5);

mit 

zoom : 150%;

behebt das Problem der Unschärfe von Text in Chrome.

11

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

Wenden Sie die nächsten Deklarationen auf die Elemente an, die unscharf erscheinen (in meinem Fall befanden sie sich in einem transformierten Element):

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

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

6
ruidovisual

Um die Unschärfe zu verbessern, insbesondere. Versuchen Sie Folgendes in Chrome:

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

Dies muss ein Fehler in Chrome (Version 56.0.2924.87) sein, aber das folgende Bild behebt die Unschärfe für mich, wenn die CSS-Eigenschaften in der Konsole geändert werden ('. 0'). Ich werde es melden.

filter: blur(.0px)
5
andyw

Ich fand heraus, dass das Problem in irgendeiner Weise bei relativen Transformationen auftritt. translateX (50%), Maßstab (1.1) oder was auch immer. Die Angabe absoluter Werte funktioniert immer (erzeugt keinen verschwommenen Text (ures)).

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

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

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

HINWEIS

Ich bin mir ziemlich sicher, dass diese Werte je nach Bildschirmgröße variieren. Ich wollte nur meine Erfahrungen teilen, falls es jemandem hilft. 

3
scipper

Verwenden Sie zoom: 101%; für komplexe Designs, wenn Sie keine Kombination aus Zoom + Skala verwenden können.

3
Tom Roggero

In meinem Fall verursachte folgender Code verschwommene Schrift:

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

und durch das Hinzufügen von Zoom-Eigenschaften wurde es für mich behoben. Spiele mit Zoom herum und habe für mich gearbeitet:

zoom: 97%;   
2
Raza Ahmed

Ich habe eine viel bessere und sauberere Lösung gefunden:

.element{
 transform:scale(0.5) 
 transform-Origin: 100% 0;
}

oder

.element{
 transform:scale(0.5) 
 transform-Origin: 0% 0;
}

Danke an diesen Beitrag: Verwackelungsrendern mit transform: scale verhindern

1
Gabriel G

Eine weitere Korrektur, die ich gerade für verschwommene Transformationen (translate3d, scaleX) in Chrome gefunden habe, besteht darin, das Element als " display: inline-table ;" In einigen Fällen scheint es eine Pixelrundung zu erzwingen (auf der X-Achse).

Ich habe gelesen, dass die Subpixel-Positionierung unter Chrome beabsichtigt war, und Entwickler können dies nicht beheben.

1
Corentin

Keines der oben genannten hat bei mir funktioniert.

Es hat funktioniert, als ich Perspektive hinzugefügt habe

dh von

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

ich wechselte zu

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

1
Sengupta Amit

sie können css filter verwenden, um das Problem zu beheben.

.element {
    filter: blur(0);
}

über Hersteller-Präfix, bitte machen Sie es selbst. -webkit-filter, -ms-filter. detail ist hier http://browser.colla.me/show/css_transformation_scale_cause_blurring

0
sunderls

Ich habe eine Kombination aller Antworten verwendet und das hat am Ende für mich funktioniert:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
0
Kyle Underhill

Keines der oben genannten Programme hat für mich gearbeitet. Ich hatte diese Animation für Popups:

@keyframes Pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

In meinem Fall war der verschwommene Effekt nach der Anwendung dieser Regel verschwunden: -webkit-perspective: 1000;, obwohl er im Chrome-Inspector als nicht verwendet markiert ist.

0
Gendos-ua

Ich habe meinen Fall korrigiert, indem ich Folgendes hinzugefügt habe:

transform: perspective(-1px)
0
Anders Lund

Nachdem ich alles andere ohne Erfolg ausprobiert hatte, war dieses Problem für mich endgültig behoben: Entfernen der will-change: transform;-Eigenschaft. Aus irgendeinem Grund verursachte es eine schrecklich verschwommene Skalierung in Chrome, nicht jedoch Firefox.

0
Dan

In Chrome 74.0.3729.169 vom 25.05.19 scheint es keine Korrektur für Unschärfen zu geben, die bei bestimmten Zoomstufen des Browsers auftreten, die durch die Transformation verursacht wurden. Sogar ein einfaches TransformY(50px) verwischt das Element. Dies tritt in aktuellen Versionen von Firefox, Edge oder Safari nicht auf, und es scheint nicht in allen Zoomstufen aufzutreten.

0
Austin McCool

FÜR CHORME:

Ich habe hier alle Vorschläge ausprobiert. Aber nicht funktionieren. Mein College hat eine großartige Lösung gefunden, die besser funktioniert:

Sie sollten nicht über 1,0 skalieren

Fügen Sie translateZ(0) in den Schwebeflug ein, aber NICHT in die Nicht-Schwebeflug-/Anfangsposition.

Beispiel:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}
0
JonasB

Der Text wird nicht unscharf sein, wenn Sie nicht transition die transform verwenden.

Mach einfach das:

&:hover {
    transform: scale(1.1);
}

Ohne den Übergang wie transition: all .2s;

0
kyw

Für mich bestand das Problem darin, dass meine Elemente transformStyle: preserve-3d verwendeten. Ich erkannte, dass dies für die App nicht wirklich erforderlich war, und die Unschärfe wurde durch das Entfernen der App behoben.

0
Normangorman

Ich habe es aus meinem Code entfernt - transform-style: preserve-3d; Und habe dies- transform: perspective(1px) translateZ(0); hinzugefügt

die Unschärfe ging weg!

0
Tanha Islam