javascript - 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用于字体平滑，如下所示：

演示

您可以检查这个小提琴（仅在 Safari 上）并使用控件来查看如何-webkit-font-smoothing以及position影响 Safari 上的文本外观。

解决方案

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

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