僅在Safari中加載后，Google Maps API會修改頁面樣式

Question

我遇到了一個奇怪的問題。 我加載了一個頁面，最初整個頁面上的文字的不透明度為1. Google Maps API設置為在超時時加載。 2秒后，maps API加載地圖，突然修改頁面樣式。 這就像頁面上的文字不透明度一樣（見照片）。 這個問題似乎只影響我的Safari。 有沒有人遇到類似或知道某個問題或可能導致此問題的原因？

地圖加載前的原始版本

地圖加載后

Answer 1

這不是不透明度的變化，而是字體平滑的變化。 當有可見position: fixed;時，Safari可能會改變字體平滑position: fixed; 頁面上的元素。

說明

如果未指定-webkit-font-smoothing ，Safari將使用subpixel-antialiased作為大多數元素的默認值，文本將呈現如下：

但是，當遇到可見position:fixed頁面上的position:fixed元素時，它可能會使用antialiased進行字體平滑，如下所示：

演示

您可以檢查這個小提琴 （僅限Safari）並使用控件來查看-webkit-font-smoothing和position影響Safari上的文本外觀。

解

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

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