5

If I apply a rotation to a text, it will not render anti-aliased in Firefox and Chrome (only in Windows) but it renders correctly in IE. Also, it renders correctly in Chrome and Firefox in Mac OS X.

Here are screenshots comparing three browsers in my Windows 8:

http://d.pr/i/9qeg (Chrome)

http://d.pr/i/r8i0 (Firefox)

http://d.pr/i/crZ7 (IE10)

The CSS transformations for above is simply

transform: rotate(-1.5deg) translateY(-2px);

Here is a fiddle:

http://jsfiddle.net/sa6Nb/2/

Any ideas?

rafaame
  • 822
  • 2
  • 12
  • 22

2 Answers2

1

Updated Fiddle

transform: translate3d(0, 0, 0);

You can try using translate3d. As far as i know it triggers hardware acceleration for an elements rendering process. You can see the difference in the fiddle (at least in chrome)

Kilian Stinson
  • 2,376
  • 28
  • 33
  • Which browser is this screenshot from? It works fine for me using chrome. I'm not sure if there's a solution for firefox at all. – Kilian Stinson Jan 10 '14 at 09:01
  • This screenshot was taking using Google Chrome version 31.0.1650.63 m. The same that I used to take the screenshots in my question. – rafaame Jan 10 '14 at 09:03
  • Are you using Windows? – rafaame Jan 10 '14 at 09:03
  • Chrome 32 (beta) and Windows XP,I know, it's old ;-) Perhaps your hardware acceleration is not enabled? – Kilian Stinson Jan 10 '14 at 09:09
  • As of Jan/2017, this looks non-legible on an updated Firefox on Win7/Win8. Fine on Chrome on Win7. IE11 uses a strange fallback font, even worse than Firefox. – Abel Jan 19 '17 at 11:33
0

Please add this code in your class:

.your-class{
   text-shadow:0px 0px 1px #fff;
}
Darin Kolev
  • 3,401
  • 13
  • 31
  • 46
Krish
  • 1,884
  • 2
  • 16
  • 40
  • Text shadow doesn't help for lack of anti-aliasing and applied on large portion of text may just slow down rendering. – Cromax Sep 06 '16 at 09:44