Skala przekształcania CSS powoduje rozmycie tekstu

Question

Mam efekt zawieszania, który po uruchomieniu powoduje powiększenie okna. Mam tylko problem z tym, że tekst wydaje się rozmazać podczas przejścia, a następnie staje się ostry po "transformacji".

Przed wysłaniem tutaj i zdecydowaliśmy się na badania i natknąłem się na to stanowisko, które wydaje się być problem z kopalni, a także:

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

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

mam stosować swoją odpowiedź moja kompilacja i nadal niewyraźny efekt się dzieje. Podaję link poniżej i jeśli ktokolwiek mógłby mi doradzić, co mogę zrobić, to byłoby wspaniale!

np kodu przejściowym:

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

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

Answer 1

Choć nie jest to równoważne ustawieniu szerokość, wysokość, atrybuty lewo, góra, font-size w: prace unoszą się bez zacierania na Chrome .

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

Jedyna obejście „może” być w użyciu @keyframes animacji i ustawić przyzwoitą kwotę nich ~ 5 lub 10, może wymusić korektę zatarcie pomiędzy każdą klatkę kluczową.

Answer 2

Znalazłem to na CSStricks.com:

Wydaje się, jeśli ustawisz przekształca się również użyć

translate3d(0, 0, 0) 

może go naprawić, ale to powoduje czcionki być nieco rozmyte na Rotate/przekształcać. Zobacz tutaj: http://codepen.io/WillsonSmith/pen/4/2

Używam Jquery i potrzebowałem naprawić znaczniki H3 mojego slidera. Większy tekst nie był dla mnie rozmazany. Napisałem wiersz

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

i to naprawiło to najlepiej dla mnie. Potrzebowałem -webkit - przed moją transformacją. Nie wiem dlaczego, tak jak inni mówili, żeby tego nie używać. Przesłałem obraz w taki sposób, w jaki wyglądał przy różnych ustawieniach.