當頁面上帶有Flash的iframe時，Webkit字體平滑錯誤。有沒有解決辦法？

Question

我在Mac上遇到了Chrome和Safari的一個令人討厭的錯誤。它似乎與字體平滑有關，以及頁面是否在其中包含帶有Flash的iframe。

當我刪除iframe的文本看起來像它被設置爲font-smoothing: subpixel-antialiased（瀏覽器默認）。但是，當頁面上的iframe（其中運行Flash）時，文本看起來設置爲font-smoothing: antialiased。

有沒有解決這個問題的方法？請看下面的截圖。

Answer 1

我想我發現了一個 「OK」 的解決方案。我有一個div，它與內部有Flash的iframe略有重疊。這個重疊的div讓它的字體平滑了。要解決它，我只需要在iframe和重疊的div上放置z-index。要使其工作，iframe必須位於div的頂部（較高的z-index）。在上面的例子中，似乎沒有任何內容與iframe重疊，但每個元素的邊界可能會稍微重疊。您可以通過在Safari或Chrome中使用網絡檢查器來查看它。但我只是開始將z-index放在iframe和弄亂字體平滑的元素上。

Answer 2

我太有這個問題並固定它像這樣：

.video1 { position: relative; height: 338px; width: 100%; } 
.video1 > div { position: absolute; } 

然後我放置在第二DIV中的iFrame中。現在iFrame處於絕對定位的div中，它不再強制頁面上的文本在Safari中加載頁面時被反鋸齒。