[CSS] Niechciany efekt rozmazania(blur) przy skalowaniu

Question

Jak w temacie mam takie oto kółka http://jsfiddle.net/pw4tkdnr/3/

Mam ustawiony efekt transition: all .2s ease-in-out; i ten efekt rozmazania widać, kiedy zachodzi ten efekt. Po efekcie czcionka jak i obraz odzykują ostrość. Ktoś wie jak temu zapobiec?

Answer 1

Rozmywaie tekstu jest normalne. Spowodowene jest rozdzielczością ekranu ;) Podczas "scalowania" czcionka zmienia swoją wielkość (np. px). Czcionka tak naprawdę nie zmienia wortości px, tylko się scaluje. Przez co widzimy taki efekt.

Polecam zrobić osobną animację (tylko dla font'a) gdzie będzie się zmieniać docelowa wartośc px, jednak nawet wtedy zobzczymy rozmycie. Czcionki to dosyć specyficzne znaki. W takiej sytuacji najrozsądniej jest zrobić napis w postaci pliku graficznego i do niego w CSS napisać animację ;) Pozbędziemy się wtedy na 100% rozmycia na każdym monitorze :D

Przepraszam za błędy, piszę na telefonie ;)

Comments

Dzięki za sensowne wytłumaczenie :)

Answer 2

http://jsfiddle.net/pw4tkdnr/4/

Zobacz efekt 

Comments

Nadal jest rozmazanie podczas transitu (przynajmniej na chrome / mozilli). Na operze prawie znikoma widoczność tego efektu rozmazania(bez marginu też tak było)

Answer 3

Możliwe że to jest wina samego silnika przeglądarki... Tzn, nie mam takiej pewności...

Ale może gdyby to zrobić w jQuery ???