CSS Transform Scale macht Text verschwommen

Question

Ich habe einen Hover-Effekt, der, wenn es ausgelöst wird, die Box vergrößert. Das einzige Problem, das ich habe, ist, dass der Text während des Übergangs verschwimmt und dann wieder scharf wird, wenn er "transformiert" wird.

Bevor ich hier habe ich beschlossen, eine Forschung zu haben und kam in diesem Beitrag, das das Problem mit Mine als auch zu sein scheint:

How to force re-render after a WebKit 3D transform in Safari

http://duopixel.com/stack/scale.html

ich ihre Antwort auf beworben habe mein Build und immer noch der unscharfe Effekt passiert. Ich habe einen Link unten zur Verfügung gestellt und wenn jemand mich beraten könnte mit dem, was ich habe, ist es möglich, das zu lösen, wäre großartig!

zB Übergangscode:

-moz-transform:scale(1.05,1.05); 

http://jsfiddle.net/VcVpM/1/

Answer 1

Während es nicht äquivalent ist, Einstellen der Breite, Höhe, links, oben, Schriftgröße Attribute in den: schweben Arbeiten ohne Unschärfen auf Chrome .

.cta:hover { 
    width: 500px; 
    height: 500px; 
    font-size: 400%; 
} 

Die einzige andere Work-around „könnte“ sein Animation @keyframes zu verwenden und einen angemessenen Betrag von ihnen ~ 5 oder 10, könnte es eine Korrektur der zwischen den einzelnen Keyframes Verwischung erzwingen.

Answer 2

fand ich diese auf CSStricks.com:

Es erscheint, wenn Sie Ihre Transformationen setzen auch

translate3d(0, 0, 0) 

verwenden kann es beheben, aber es funktioniert Schriftarten verursachen ein wenig verschwommen auf drehen sein/verwandeln. Siehe hier: http://codepen.io/WillsonSmith/pen/4/2

Ich benutze Jquery und benötigt H3-Tags meines Schiebereglers, um behoben zu werden. Größerer Text war für mich nicht verschwommen. Ich schrieb die Zeile

$ ("# slider1_container"). Find ("h3"). Css ("- webkit-transform", "translate3d (0,0,0)"). Css ("- webkit "Text-Strich", "0.15px");

und das reparierte es am besten für mich. Ich brauchte das Webkit vor meiner Verwandlung. Ich weiß nicht warum, wie andere sagten, es nicht zu benutzen. Ich habe ein Bild von der Art, wie es aussah, mit verschiedenen Einstellungen hochgeladen.