Why is an embedded google map altering Safari's font rendering?

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?

---

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.

---

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 :)

---

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";