CODEWITHSUNDEEP
javascripthtmlcssgoogle-mapsgoogle-maps-api-3
mcbeav
mcbeav

Reputation: 12275

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 maps API loads the map, and the page styles all the sudden are modified. It's like the text on the page has been reduced in opacity ( see photos ). This issue only seems to be affecting me in Safari. Has anyone run into something similar or know of an issue or what may be causing this?

The Original Before The Map Has Loaded

Original - Before Maps is Loaded

After The Map Has Loaded

After The Map Has Loaded

Upvotes: 3

Views: 465

Answers (1)

Antony
Antony

Reputation: 15106

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

Upvotes: 9

Related Questions