css - CSS3 transform - rotate and font goes away -


i'm using simple css3 transformation rule on html element (wich contains many other elements h1,h2,inputs,and img):

    div{    -moz-transform: scale(1) rotate(-3deg) translatex(0px) translatey(0px) skewx(0deg) skewy(0deg);     -webkit-transform: scale(1) rotate(-3deg) translatex(0px) translatey(0px) skewx(0deg) skewy(0deg);     -o-transform: scale(1) rotate(-3deg) translatex(0px) translatey(0px) skewx(0deg) skewy(0deg);     -ms-transform: scale(1) rotate(-3deg) translatex(0px) translatey(0px) skewx(0deg) skewy(0deg);     transform: scale(1) rotate(-3deg) translatex(0px) translatey(0px) skewx(0deg) skewy(0deg);    } 

the problem font skretched can see how possible?

check img: enter image description here

is there way/trick fix font not skrech or going bad, when using rotate css3?

nb: avoid comments "it looks me" :d please check word's chars not vertically aligned, check example word quale l , e chars

in chrome have no problems, firefox seems make problems fonts in rotating :(

as can see font ok if big size font, mean, font-size:30px , more, if go under 30px font not ok.

i've read 2 days ago different chrome browsers might render differently css3 rotation , without -webkit-.

update:

i have problem in chrome also. rendered output crispy , unaligned (like in picture). i've tried apply (in chrome) -webkit-filter: opacity(0.999); or -webkit-filter: blur(0px); , font not crispy, it's fine rendered , aligned, blured bit in both cases. strange. , think works filter.

in case of firefox, -moz-filter doesn't work i've found solution give same result -webkit-filter in chrome:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 

numers in values matrix

1 0 0 0 0  0 1 0 0 0 0 0 1 0 0  0 0 0 1 0 

and here screenshot in ff after rotation , after use filters.

enter image description here

fullscreen: http://i.imgur.com/tuad1b2.jpg

and here live example (for chrome , ff)


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -