8

If you look at the footer on this page here in Safari, then look at the same footer on any other page, you'll see a difference in font rendering. It looks the the font smoothing is being applied twice to me.

If I turn off the Google map, then the font rendering returns to normal, so I'm confident the map is at the root of the problem.

I am applying a transparent font shadow to all text to fix some @font-face rendering issues (artefacts mainly), but this problem is present with or without text shadow.

It's a Mac only problem.

Has anyone else come across this problem? Is there a known cause and/or fix?

gargantuan
  • 8,888
  • 16
  • 67
  • 108
  • I've got this problem too, it occurs in safari but not chrome. – Greg May 17 '11 at 04:33
  • So this is still an issue for versions of Safari after 5, and for the Google Map API after version 3. At the moment I don't have a fix, and it doesn't look like that many people have noticed it, but I do know that the issue is related to all type, its not a Cufon, or @font-face issue, it affects all type, including web safe. It doesn't look like a -webkit applied style, or text-shadow, as overriding these things doesn't seem to work. Have tried using a previous version of the Google API, and had no joy. So am out of ideas, and the problem is still apparent on Gargantuan's example. Will keep lo – Alan Sherwood Jan 18 '12 at 14:06
  • 1
    Apparently this is caused by CSS 3D transforms that Google Maps uses. See the following SO question for fixes: http://stackoverflow.com/questions/5190787/how-to-fix-crispy-text-in-safari-5-mac-os-x-after-using-css-3d-transforms/10310493#10310493 – molf Apr 25 '12 at 06:40
  • I'd like to mark this question as answered. Could you post your comment as an answer? – gargantuan May 03 '12 at 10:03

3 Answers3

3

I've been tearing my hair out with this for the past few hours. You can fix it by adding

-webkit-font-smoothing: antialiased;

to the offending selectors.

I hope this can save someone else the time and stress it caused me.

SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
3

This was also the problem for me, THANK YOU for figuring it out!!!!

It differed slightly for me in that I had to add -webkit-font-smoothing: subpixel-antialiased; to the text that was the wrong thickness to be able to fix the problem.

Now works like a charm :)

Richard Herries
  • 280
  • 3
  • 4
0

I test them on chrome and safari on PC and they both looks almost the same , remember browser rendering are not exaclty the same and also you are using some no web safe fonts like "Baskerville LT W01 Upright", "Baskerville", "Caslon 540 LT W01 Roman", "Caslon 540", "Georgia", "Times";

VictorC
  • 226
  • 3
  • 13