仅在Safari中加载后，Google Maps API会修改页面样式

Question

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

地图加载前的原始

地图加载后

Answer 1

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

说明

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

但是，当它在页面上遇到可见的position:fixed元素时，它可能会使用antialiased进行字体平滑，如下所示：

演示

您可以检查 this fiddle （仅限Safari）并使用控件来查看-webkit-font-smoothing和position如何影响Safari上的文字外观。

解决方案

要阻止Safari更改字体平滑，只需指定font-smoothing，如下所示：

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