CSS Transform Scale rende il testo sfocato

Question

Ho un effetto hover che quando viene attivato, la casella si ingrandisce. L'unico problema che ho è che il testo sembra sfocare durante la transizione e poi diventa di nuovo nitido quando viene "trasformato".

Prima di postare qui ho deciso di avere una ricerca e sono imbattuto in questo post che sembra essere il problema con la mia così:

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

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

ho applicato la loro risposta alla la mia build e ancora l'effetto sfocato accade. Ho fornito un link qui sotto e se qualcuno mi può consigliare con quello che ho è possibile risolvere sarebbe fantastico!

esempio di codice di transizione:

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

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

Answer 1

Anche se non è equivalente, impostando la larghezza, l'altezza, a sinistra, in alto, font-size attributi in: opere hover senza sfocature su Chrome .

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

L'unico altro work-around "potrebbe" essere quello di utilizzare @keyframes animazione e impostare una discreta quantità di loro ~ 5 o 10, potrebbe forzare una correzione della sfocatura tra ogni fotogramma chiave.

Answer 2

Ho trovato questo su CSStricks.com:

Sembra se si impostano i trasforma utilizzare anche

translate3d(0, 0, 0) 

si può risolvere il problema, ma non causare i caratteri per essere un po 'sfocata su Ruota/trasformare. Vedi qui: http://codepen.io/WillsonSmith/pen/4/2

Io uso Jquery e ho bisogno dei tag H3 del mio slider per essere corretto. Il testo più grande non era sfocato per me. Ho scritto la linea

$ ("# slider1_container") trovano ("H3") css ("- webkit-trasformare", "translate3d (0,0,0)")... Css ("- WebKit -text-stroke "," 0.15px ");

e che ha risolto meglio per me. Avevo bisogno del -webkit- di fronte alla mia trasformazione. Non so perché, come altri hanno detto di non usarlo. Ho caricato un'immagine del suo aspetto con alcune impostazioni diverse.