问题
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
After The Map Has Loaded
回答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;
}
来源：https://stackoverflow.com/questions/19724143/google-maps-api-modifying-page-styles-after-loading-only-in-safari