仅在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用于字体平滑,如下所示:

演示

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

解

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

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