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!
google-chrome
css
webkit
transform
css-animations
Ryan O'Rourke
quelle
quelle
Antworten:
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.
TranslateZ funktioniert auch, da es ein Hack ist, der Animation Hardwarebeschleunigung hinzuzufügen.
Beide Eigenschaften beheben das Problem, das Sie haben, aber einige Leute fügen auch gerne hinzu
zu ihrem animierten Objekt. Ich finde, dass es das Rendering einer Web-Schriftart ändern kann, aber Sie können auch mit dieser Methode experimentieren.
quelle
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.perspective(1px)
, Ihrentransform:
Code hinzuzufügen , dies funktionierte für mich in Chrome, während nichts anderes das Problem lösteUm die Unschärfe zu verbessern, insb. Versuchen Sie dies auf Chrome:
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:quelle
perspective(1px)
Eigentum los und schau, ob es besser funktioniert.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.quelle
translateZ(0)
, nur geändert1.05
zu1.048
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.quelle
will-change: transform;
das Problem leichtAnstatt
mit
behebt das Problem der Textunschärfe in Chrome.
quelle
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.
quelle
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 ändereblur(0px)
. Da das Element dynamisch ist und auch eine dynamische (JS) Lösung erfordert, ... ist dies zum Kotzen: \Sunderls führen mich zur Antwort. Außer
filter: scale
existiert nicht, aber existiertfilter: blur
.Wenden Sie die nächsten Deklarationen auf die Elemente an, die verschwommen erscheinen (in meinem Fall befanden sie sich in einem transformierten Element):
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.
quelle
-webkit-filter: blur(0);
allein arbeitet für mich.backface-visibility: hidden;
verwischt mein Element, wenn ich die Skalierung danach zurücksetze.blur(0px);
es nicht repariert. aber wenn ich es tueblur(1px);
und dann den Pfeil nach unten drücke,blur(0px);
sieht es richtig aus. Auf Seite aktualisiert / egal was ich in das CSS schreibeIch 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.
quelle
Ich habe eine viel bessere und sauberere Lösung gefunden:
oder
Dank dieses Beitrags: Verhindern von verschwommenem Rendern mit transform: scale
quelle
Hinzufügen
perspective(1px)
hat bei mir funktioniert.zu
quelle
Versuchen Sie es mit
zoom: 101%;
komplexen Designs, wenn Sie keine Kombination aus Zoom und Skalierung verwenden können.quelle
zoom
nicht durch einen Webstandard definiert ist und von Firefox caniuse.com/#feat=css-zoomIn meinem Fall verursachte der folgende Code eine verschwommene Schrift:
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:
quelle
zoom
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.
quelle
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 ...
Hier ist das CSS, in dem der Chrome-Fehler auftritt ...
Hier ist das feste CSS ...
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.
quelle
Ich habe das gleiche Problem. Ich habe das behoben mit:
quelle
Keiner der oben genannten hat für mich funktioniert. Ich hatte diese Animation für Popups:
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.quelle
will-change: transform;
dass verschwommene Elemente Grenzen korrigiert. Alle anderen Antworten haben bei mir nicht funktioniert.Meine Lösung war:
Anzeige: initial;
Dann war es knusprig scharf
quelle
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)
quelle
perspective(1px)
machte es für mich noch schlimmer :(Ich habe meinen Fall behoben, indem ich hinzugefügt habe:
quelle
scale()
TransformationsergebnisFÜ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:
quelle
Ich habe eine Kombination aller Antworten verwendet und dies hat am Ende für mich funktioniert:
quelle
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:
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!
quelle
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 habedieses
es hilft mir
quelle
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.quelle
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!
quelle
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.quelle
top: 0, bottom: 0, left: 0; right: 0; margin: auto
festzulegen : 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.Es wird schwierig sein, nur mit CSS zu lösen.
Also habe ich es mit jquery gelöst.
Das ist mein CSS.
und das ist meine Frage.
quelle
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.
quelle
Sie können CSS verwenden
filter
, um dies zu beheben.Informationen zum Herstellerpräfix machen Sie bitte selbst.
-webkit-filter
,-ms-filter
. Details finden Sie hier http://browser.colla.me/show/css_transformation_scale_cause_blurringquelle
filter: scale
nach Entwickler.mozilla.org/en/docs/Web/CSS/filterDer Text wird nicht verschwommen , wenn Sie nicht tun
transition
dastransform
.Mach das einfach:
Ohne den Übergang wie
transition: all .2s;
quelle