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

Question

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?

Answer 1

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.

Answer 2

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