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

126

Anscheinend gab es kürzlich ein Update für Google Chrome, das nach dem Ausführen von a unscharfen Text verursacht transform: scale(). Konkret 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 dies nicht getan und es scheint keine Auswirkungen auf andere Webkit-Browser (wie Safari) zu haben. Es gab einige andere Beiträge über Personen, die ein ähnliches Problem mit 3D-Transformationen hatten, aber nichts über solche 2D-Transformationen finden können.

Irgendwelche Ideen wären dankbar, danke!

Ryan O'Rourke
quelle
Ich habe die Site gerade mit Firefox und IE 10 besucht und sehe das Problem nicht. Wenn es auf Chrome beschränkt ist, müssen Sie möglicherweise warten, bis Google es selbst repariert.
Nolonar
Ich sehe keine Unschärfe ... Ich bin auf Chrome v25 / PC
vsync
Ich bin auch schon früher auf dieses Problem gestoßen, da Nolonar erwähnt hat, dass wir warten müssen, bis Google es behoben hat.
Raj_n
Keine Lösung, aber ich habe festgestellt, dass das Problem nur bei mir auftritt, wenn ich CSS optimizeLegibility verwende.
Bangkokian
Link ist unterbrochen.
Timothy003

Antworten:

77

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

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

backface-visibility: hidden;

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

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

zu ihrem animierten Objekt. Ich finde, dass es das Rendering einer Web-Schriftart ändern kann, aber Sie können auch mit dieser Methode experimentieren.

2ne
quelle
12
Diese Techniken scheinen alle Dinge zu verbessern, aber ich kann Chrome immer noch nicht auf das gleiche Maß an Klarheit bringen, das ich in Firefox sehe.
Michael Martin-Smucker
13
backface-visibility: hidden;In meinem Fall hat es sicher funktioniert, eine seltsame, verschwommene Bewegung zu lösen, die durch einen Opazitätsübergang verursacht wurde. Die seltsame Bewegung ist jetzt weg, ABER sie hat stattdessen die Texte in meinem Div dauerhaft verschwommen gemacht.
ITWitch
13
Wie @ykadaru vorgeschlagen hat, versuchen Sie perspective(1px), Ihren transform:Code hinzuzufügen , dies funktionierte für mich in Chrome, während nichts anderes das Problem löste
Serge Eremeev
4
Funktioniert nicht unter Chrome Version 65.0.3325.162 (Official Build) (64-Bit) unter Ubuntu 17.10 mit Gnome X11-Sitzung (Wayland off)
Marecky
3
In Chrome 72 führen die ersten beiden Optionen dazu, dass der Text während und am Ende der Transformation
unscharf wird
24

Um die Unschärfe zu verbessern, insb. Versuchen Sie dies auf Chrome:

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

UPDATE: Durch die Perspektive wird der Abstand zwischen dem Benutzer und der Z-Ebene erhöht, wodurch das Objekt technisch skaliert wird und die Unschärfe als "dauerhaft" erscheint. Das perspective(1px)Obige ist wie Entenband, weil wir der Unschärfe entsprechen, die wir zu lösen versuchen. Vielleicht haben Sie mit dem folgenden CSS mehr Glück:

transform: translateZ(0);
backface-visibility: hidden;
Ykadaru
quelle
4
Für mich macht das alles noch schlimmer.
Balu
1
Für mich behebt dies den Fehler (ohne dies bewegt sich das Element 1px, nachdem die Animation abgeschlossen ist, transformiere: Perspektive (1px) allein behebe dies!)
Sergiu
@balu überprüfe meine aktualisierte Antwort! Werde das perspective(1px)Eigentum los und schau, ob es besser funktioniert.
Ykadaru
16

Ich fand, dass das Anpassen des Skalierungsverhältnisses leicht half.

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

Ich habe auch verwendet, translateZ(0)was den letzten Rundungsschritt von Chrome in der Transformationsanimation anzupassen scheint. Dies ist ein Plus für meine Onhover-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 transformierte Schriftart nicht so knusprig zu sein scheint.

Jordan Nakamoto
quelle
1
Das ist der einzige Ansatz, der für mich funktioniert hat. Die anderen Ansätze (Backface-Sichtbarkeit, Hinzufügen von Filtern, Perspektive und gute alte translateZ) haben es nur noch schlimmer gemacht. Versuchen Sie, auf ganze Pixel zu skalieren. Gehen Sie beispielsweise mit einem Skalierungsfaktor von 1.1429 (16/14) von 14px auf 16px.
Hugo der Hungrige
1
Arbeitete für mich ohne translateZ(0), nur geändert 1.05zu1.048
A. Volg
15

Nachdem ich alles andere hier ohne Glück ausprobiert hatte, konnte ich dieses Problem endgültig beheben, indem ich das will-change: transform;Eigentum entfernte. Aus irgendeinem Grund verursachte es in Chrome eine schrecklich verschwommen aussehende Skalierung, nicht jedoch in Firefox.

Dan
quelle
Warum sollte jemand dies ablehnen? Ich verstehe es nicht ... :( Dies ist ein vollständig gültiges Problem in einigen Versionen von Chrome, und es scheint, dass "Willensänderung" im Allgemeinen noch ziemlich neu ist und wahrscheinlich nicht verwendet werden sollte. Weitere Informationen finden Sie unter Greensock .com / will-change
Dan
Hatte das gleiche Problem. Danke fürs Schreiben.
Raine
Ich hatte das gleiche Problem beim Rendern von Material-Design-Komponenten in Chrome 75. Durch Entfernen des CSS-Stils mit "Willensänderung" wurde das Problem behoben.
Rob
Bestätigt in Chrome 79
Fareesh Vijayarangam
1
Ich habe das Gegenteil, indem ich will-change: transform;das Problem leicht
behebe
14

Anstatt

transform: scale(1.5);

mit

zoom : 150%;

behebt das Problem der Textunschärfe in Chrome.

Naisheel Verdhan
quelle
Es kann helfen, führt aber auch andere Probleme ein, wie manchmal weiße Grenzlinien, die manchmal eingeführt werden
Kevin
1
Ich bin mir nicht sicher, warum die Abstimmung. Als ich dies auf Kontrollkästchen anwendete, funktionierte dies viel besser als transform: scale ()
Brian McCall
2
Verwenden Sie für Firefox transform: scale () funktioniert wie ein Zauber ohne Unschärfe. Sie müssen an der Browsererkennung arbeiten und entsprechend für Chrome / Safari und Firefox handeln.
Naisheel Verdhan
15
Ein weiteres Problem ist, dass der Zoom anscheinend nicht mit der Übergangseigenschaft funktioniert, sodass er nicht für CSS-Animationen verwendet werden kann
ericgrosse
3
Es funktioniert und fuchs die Unschärfe, aber es ändert auch die Position der Elemente.
user1156544
8

Dies muss ein Fehler in Chrome (Version 56.0.2924.87) sein, aber das Folgende behebt die Unschärfe für mich beim Ändern der CSS-Eigenschaften in der Konsole ('. 0'). Ich werde es melden.

filter: blur(.0px)
andyw
quelle
1
Haben Sie mit Ihrem Fehlerbericht etwas erreicht?
Diazole
Ich fürchte, ich kann mich nicht einmal daran erinnern, wo ich den Fehler eingereicht habe. Habe es aber getan.
Andy
Ich verwende Bootstrap (4.4.1), Chrome (80.0.3987.132), Windows 10 (mit einer um 125% vergrößerten Ansicht) und habe verschwommene Texte im Dropdown-Menü. Das Menü wird mit positioniert transform: translate3d();und dies scheint das Problem zu verursachen. Keine der vorgeschlagenen Lösungen hat bei mir funktioniert. Außer / irgendwie dieser. Dies funktioniert nur, wenn ich es zuerst auf einen positiven Wert (z. B. blur(0.1px)) setze und dann auf ändere blur(0px). Da das Element dynamisch ist und auch eine dynamische (JS) Lösung erfordert, ... ist dies zum Kotzen: \
akinuri
7

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

Wenden Sie die nächsten Deklarationen auf die Elemente an, die verschwommen 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 Elemente nicht perfekt aussehen, aber sobald der Übergang abgeschlossen ist, tun sie es.

ruidovisual
quelle
-webkit-filter: blur(0);allein arbeitet für mich. backface-visibility: hidden;verwischt mein Element, wenn ich die Skalierung danach zurücksetze.
Kai Hartmann
Das ist ein bisschen lustig für Chrome ... wenn ich es einstelle, wird blur(0px);es nicht repariert. aber wenn ich es tue blur(1px);und dann den Pfeil nach unten drücke, blur(0px);sieht es richtig aus. Auf Seite aktualisiert / egal was ich in das CSS schreibe
Tom Roggero
1
@TomRoggero Dies klingt weniger spezifisch für den Wert der Unschärfeeigenschaft als vielmehr darüber, wann das Layout neu gezeichnet wird. Sie können versuchen, das Neuzeichnen des Elements mit JavaScript nach einiger Verzögerung zu erzwingen.
Gajus
5

Ich fand heraus, dass das Problem in irgendeiner Weise bei relativen Transformationen auftritt. translateX (50%), scale (1.1) oder was auch immer. Die Angabe von Absolutwerten funktioniert immer (erzeugt keinen unscharfen Text (ures)).

Keine der hier erwähnten Lösungen 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 transform: translateY(-50%) translateX(-50%)verursacht die Unschärfe (ich möchte einen Dialog zentrieren).

Um etwas 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 je nach Bildschirmgröße variieren. Ich wollte nur meine Erfahrungen teilen, falls es jemandem hilft.

scipper
quelle
Ich bin auf genau dasselbe Problem gestoßen und habe genau dasselbe getan. Ich habe ein Modal mit translate3d zentriert (-50%, -50%, 0). In meinem Fall habe ich die Werte auf -50,048% erhöht und es sieht perfekt aus.
Chris Gutierrez
4

Hinzufügen perspective(1px)hat bei mir funktioniert.

transform: scale(1.005);

zu

transform: scale(1.005) perspective(1px);
SUHAIL KC
quelle
3

Versuchen Sie es mit zoom: 101%;komplexen Designs, wenn Sie keine Kombination aus Zoom und Skalierung verwenden können.

Tom Roggero
quelle
Beachten Sie, dass dies zoomnicht durch einen Webstandard definiert ist und von Firefox caniuse.com/#feat=css-zoom
Boltgolt
3

In meinem Fall verursachte der folgende Code eine verschwommene Schrift:

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

und nur das Hinzufügen einer Zoom-Eigenschaft hat es für mich behoben. Spielen Sie mit dem Zoom herum, folgendes hat bei mir funktioniert:

zoom: 97%;   
Raza Ahmed
quelle
4
Keine Firefox-Unterstützung fürzoom
Dustin Poissant
3

Ein weiterer Fix, den ich gerade für verschwommene Transformationen (translate3d, scaleX) in Chrome gefunden habe, besteht darin, das Element als " display: inline-table ;" festzulegen . 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 werden sie nicht beheben.

Corentin
quelle
3

Update 2019
Der Chrome-Anzeigefehler ist immer noch nicht behoben, und obwohl die Benutzer nichts dafür tun, hilft keiner der auf dieser Website angebotenen Vorschläge, das Problem zu beheben. Ich kann zustimmen, dass ich jeden einzelnen vergeblich ausprobiert habe: Nur 1 kommt nahe und das ist die CSS-Regel: filter: blur (0); Dadurch wird das Verschieben eines Containers um 1 Pixel verhindert, der unscharfe Anzeigefehler des Containers selbst und des darin enthaltenen Inhalts wird jedoch nicht behoben.

Hier ist die Realität: Es gibt buchstäblich keine Lösung für dieses Problem. Hier finden Sie eine Lösung für flüssige Websites

FALL
Ich entwickle gerade eine flüssige Website und habe 3 Divs, die alle mit Hover-Effekten zentriert sind und prozentuale Werte sowohl in der Breite als auch in der Position teilen. Der Chrome-Fehler tritt im mittleren Container auf, der auf links gesetzt ist: 50%; und transformiere: translateX (-50%); eine gemeinsame Einstellung.

BEISPIEL: Zuerst das HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Hier ist das CSS, in dem der Chrome-Fehler auftritt ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Hier ist das feste CSS ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Fehlerhafte Geige: https://jsfiddle.net/m9bgrunx/2/
Behobene Geige: https://jsfiddle.net/uoc6e2dm/2/

Wie Sie sehen können, sollte eine kleine Änderung des CSS die Notwendigkeit verringern oder beseitigen, Transform für die Positionierung zu verwenden. Dies kann auch für Websites mit fester Breite sowie für Flüssigkeiten gelten.

SJacks
quelle
Bei der Verwendung der Übersetzung wird Unschärfe erwartet, da das Element auf einem halben Pixel enden kann . Es gibt jetzt bessere Alternativen zum Zentrieren von Dingen: Flexbox-Beispiel , Gitter-Beispiel
Timothy003
Der einzige Browser, den ich getestet habe und der ein Problem mit dem Transformationscenter zu haben scheint, ist Chrome. Alles andere erscheint kristallklar. Ich habe zurückgeschaut und dieses Problem gibt es seit 7 Jahren! Trotzdem gibt es viele Möglichkeiten, eine Katze zu häuten, und wie Sie sagen, ist sie nicht einmal mehr erforderlich.
SJacks
das ist unglaublich, aber filter: unschärfe (-0,1px); half mir !!. Wie zum Teufel funktioniert das?
jt3k
3

Ich habe das gleiche Problem. Ich habe das behoben mit:

.element {
  display: table
}
Ravi
quelle
2
verrückt, aber es funktioniert; Chrome ist anscheinend der neue IE
Arthur
oooow Herr! ir funktioniert! Ich denke, Tabelle 'fix' de Breite in PX war nicht möglich Breite mit einem halben Pixel ...
LuanLuanLuan
2

Keiner der oben genannten hat für mich funktioniert. 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 Anwendung dieser Regel verschwunden: -webkit-perspective: 1000;obwohl er im Chrome-Inspektor als nicht verwendet markiert ist.

Gendos-ua
quelle
Es funktioniert bei mir und ist auch als unbenutzt markiert. Ich habe auch hinzugefügt, will-change: transform;dass verschwommene Elemente Grenzen korrigiert. Alle anderen Antworten haben bei mir nicht funktioniert.
Jakub Zawiślak
2

Meine Lösung war:

Anzeige: initial;

Dann war es knusprig scharf


quelle
1

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)

Sengupta Amit
quelle
Das Hinzufügen perspective(1px)machte es für mich noch schlimmer :(
balu
1

Ich habe meinen Fall behoben, indem ich hinzugefügt habe:

transform: perspective(-1px)
Anders Lund
quelle
Dies für mich entfernte gerade das scale()Transformationsergebnis
jpenna
1

FÜR CHORME:

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

Sie sollten NICHT über 1.0 hinaus skalieren

Und translateZ(0)in den Schwebeflug einschließen, aber NICHT in die Nicht-Schwebe- / Ausgangsposition.

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);
}
JonasB
quelle
1

Ich habe eine Kombination aller Antworten verwendet und dies 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;
}
Kyle Underhill
quelle
1

Ich hatte das Problem mit verschwommenem Text in Chrome, aber nicht in Firefox, als ich es verwendet habe transform: translate(-50%,-50%).

Nun, ich habe wirklich viele Problemumgehungen ausprobiert wie:

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

Nichts davon hat bei mir funktioniert.

Schließlich habe ich die Höhe und Breite des Elements gleichmäßig gemacht. Es hat das Problem für mich gelöst !!!

Hinweis: Dies kann von Anwendungsfall zu Anwendungsfall abhängen. Aber sicherlich einen Versuch wert!

Prajwal_Shenoy
quelle
1

Ich habe viele Beispiele aus diesen Antworten ausprobiert, leider hilft nichts für Chrome, das Version 81.0.4044.138 ich stattdessen dem transformierenden Element hinzugefügt habe

 transform-origin: 50% 50%;

dieses

 transform-origin: 51% 51%;

es hilft mir

Oleg Bondarenko
quelle
0

Für mich war das Problem, dass meine Elemente verwendet wurden transformStyle: preserve-3d. Mir wurde klar, dass dies für die App nicht wirklich benötigt wurde, und durch Entfernen wurde die Unschärfe behoben.

Normangorman
quelle
0

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

Die Unschärfe ging weg!

Tanha Islam
quelle
0

In Chrome 74.0.3729.169 (Stand 5-25-19) scheint es keine Korrektur für Unschärfen zu geben, die bei bestimmten durch die Transformation verursachten Browser-Zoomstufen auftreten. Sogar ein einfaches TransformY(50px)wird das Element verwischen. Dies tritt in aktuellen Versionen von Firefox, Edge oder Safari nicht auf und scheint nicht bei allen Zoomstufen aufzutreten.

Austin McCool
quelle
Das ist mir passiert. Ich kann diesen Unschärfeeffekt nicht loswerden. Eine Lösung, die funktioniert hat, besteht darin, diese Eigenschaften top: 0, bottom: 0, left: 0; right: 0; margin: autofestzulegen : Dann nimmt der Container jedoch den gesamten verfügbaren Platz ein (er muss breit sein). Dies funktioniert also nicht, wenn der Inhalt entscheiden soll, wie groß der Container sein soll.
Kwiat1990
0

Es wird schwierig sein, nur mit CSS zu lösen.

Also habe ich es mit jquery gelöst.

Das ist mein CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

und das ist meine Frage.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}
Madstone
quelle
0

Nur um die Fix-Begeisterung zu verstärken, behebt das Platzieren von {border: 1px solid # ???} um das schlecht aussehende Objekt das Problem für mich. Wenn Sie eine stabile Hintergrundfarbe haben, sollten Sie dies ebenfalls berücksichtigen. Das ist so dumm, dass niemand daran gedacht hat, es zu erwähnen, denke ich.

user1769038
quelle
-1

Der Text wird nicht verschwommen , wenn Sie nicht tun transitiondas transform.

Mach das einfach:

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

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

kyw
quelle