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

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