Why does the built-in google map change the display of Safari fonts?

Question

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

If I turn off the Google map, the font rendering will return to normal, so I'm sure the map is at the root of the problem.

I apply a transparent font shadow to the entire text to fix some @ font-face rendering problems (mainly artifacts), but this problem is present with or without shadow text.

This is a problem only with Mac.

Anyone else run into this problem? Is there a known cause and / or fix?

Answer 1

I have torn my hair off for the past few hours. You can fix this by adding

-webkit-font-smoothing: antialiased; 

for violators.

Hope this can save someone else time and emphasize that it caused me.

Answer 2

This was a problem for me, THANKS for what you understood !!!!

It was a little different for me in that I had to add -webkit-font-smoothing: subpixel-antialiased; to text that was the wrong thickness to fix the problem.

Now it works like a charm :)

Answer 3

I test them for chrome and PC safaris and they both look almost the same, remember that browser rendering is not the same, and you also use some web safe fonts like "Baskerville LT W01 Upright", "Baskerville", "Caslon 540 LT W01 Roman", "Caslon 540", "Georgia", "Times";