Verschwommenheit bei Transformationsanimationen entfernen?

Question

Es ist Mitte 2016, gibt es eine gute Problemumgehung, um Unschärfe bei Transformationsanimationen zu entfernen?

Angenommen ich einige div mit Text nach innen und ich möchte es animieren mit:

div:hover { 
    transform: rotate(90deg); 
    transition: 1s transform; 
} 

Ehrlich gesagt habe ich versucht, alle Lösungen, die ich nicht alles online finden konnten. Die meisten Lösungen sind ein paar Jahre alt.

Eine Sache, die ich ausprobiert habe, die die Dinge wesentlich sauberer macht, ist, die Schrift wie verrückt zu skalieren und sie dann mit Hilfe der Transformationsskalierung wieder auf ihre ursprüngliche Größe zu bringen. Jetzt, wenn der Browser meinen Text rastert, wenn die Animation ausgeführt wird, geschieht dies mit einem qualitativ hochwertigen Bild.

Gibt es einen besseren Weg, der nicht so hacky ist?

Klarere Frage: Wie mache ich Animationen von Objekten klar, ohne dass meine Objekte verschwommen werden? Es muss eine Möglichkeit geben, die Optimierungen des Browsers zu deaktivieren.

Ich erfahre dies derzeit mit Chrome/Webkit-Browsern.

Answer 1

Dies ist eine sehr häufige Frage - die Unschärfe wird durch die Art und Weise verursacht, in der Chrome den Inhalt rendert, wenn keine Hardwarebeschleunigung verwendet wird.

Es ist eine häufig verwendete soluton für diese (ein Hack, sozusagen), die webkit zwingt die Beschleunigung zu verwenden, um die Elemente nicht verschwommen mehr machen. hier

Werfen Sie einen Blick: I've updated your jsFiddle

Sie wollen die translateZ oder translate3d verwenden, um Eigenschaften, wenn ein Übergang zu tun, etwa so:

.one:hover { 
    transform: rotate(90deg) translate3d(0,0,0); 
    transition: 1s all; 
} 
.two:hover{ 
    transform: rotate(90deg) translateZ(0); 
    transition: 1s all; 
} 
.three:hover{ 
    transform: rotate(90deg); 
    transition: 1s all; 
}