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

Question

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

map 加载前的原图

map 加载后

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