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

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!

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.

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;

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.

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.

Anstatt

transform: scale(1.5);

mit

zoom : 150%;

behebt das Problem der Textunschärfe in Chrome.

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)

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.

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.

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;
}

Dank dieses Beitrags: Verhindern von verschwommenem Rendern mit transform: scale

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

transform: scale(1.005);

zu

transform: scale(1.005) perspective(1px);

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

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%;   

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.

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.

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

.element {
  display: table
}

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.

Meine Lösung war:

Anzeige: initial;

Dann war es knusprig scharf

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)

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

transform: perspective(-1px)

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);
}

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;
}

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!

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

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.

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!

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.

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);
    }
})}

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.

Sie können CSS verwenden filter, um dies zu beheben.

.element {
    filter: blur(0);
}

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_blurring

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;