仅在Safari中加载后Google Maps API修改页面样式 [英] Google Maps API modifying page styles after loading only in Safari

问题描述

我遇到了一个奇怪的问题。我加载了一个页面，最初整个页面上的文本不透明度为1.Google Maps API设置为在超时时加载。 2秒后，maps API加载地图，突然修改页面样式。这就像在页面上的文字已被减少不透明（见照片）。这个问题似乎只在Safari中影响我。有没有人遇到类似问题或知道问题或可能导致此问题？

地图加载前的原始地址

在地图加载后

解决方案

这不是透明度的变化，而是字体平滑的改变。当页面上有可见的 position：fixed; 元素时，Safari可能会更改字体平滑处理。

h2>

当未指定 -webkit-font-smoothing 时，Safari将使用 subpixel-antialiased 作为大多数元素的默认值，文本将如下所示：

然而，当它遇到一个可见的位置：fixed 元素，它可以使用 antialiased 进行字体平滑处理，看起来像这样：

演示

您可以检查 这个小提琴 （仅适用于Safari）并使用控件进行播放以查看如何 -webkit-font-smoothing 和位置会影响Safari上的文本外观。

解答n

为防止Safari改变字体平滑，只需按如下方式指定 font-smoothing ：

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


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

解决方案

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

这篇关于仅在Safari中加载后Google Maps API修改页面样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！