Search code examples
cssrotationfont-face

CSS3 @font-face rotation issue on Chrome/Mac OS X

I have this problem on my blog. The menu-typo is integrated via @font-faces and dances around like the hollywood-sign. It has a 3degree-rotation and on win it works perfectly but on mac it has no correct base-line. Are there ways to fix this?

Here's a screenshot (Mac, Chrome):

Mac/Chrome screenshot

The design is currently located at http://blog.desiign.de/. By the way, in Windows the rotation works perfectly.

Solution

  • This has become a bit of a golden hammer lately, but forcing hardware acceleration on the layer ensures that the font is rendered correctly:

    nav#category-nav {
    -webkit-transform-style: preserve-3d;
}

    This fixes your problem in Chrome 13 and Safari 5.1 - the browsers I could test.