Google Maps Api Modifying Page Styles After Loading Only In Safari

I am running into a strange issue. I load a page and initially the text on the whole page has an opacity of 1. Google Maps API is set to load on a timeout. After 2 seconds, the map

Solution 1:

That is not a change in opacity, but a change in font smoothing. Safari may change the font smoothing when there are visible position: fixed; elements on the page.

Explanation

When -webkit-font-smoothing is not specified, Safari will use subpixel-antialiased as the default value for most of the elements and the text would be rendered like this:

However, when it encounters a visible position:fixed element on the page, it may use antialiased for font smoothing, which looks like this:

Demo

You can check this fiddle (on Safari only) and play with the controls to see how -webkit-font-smoothing and position affect text appearance on Safari.

Solution

To prevent Safari from changing font smoothing, just specify the font-smoothing as follows:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}