Webkit -页面上的iframe with Flash时字体平滑错误。有什么变通办法吗？

Question

我在Mac上使用Chrome和Safari时遇到了一个严重的bug。这似乎与字体平滑有关，以及页面中是否有一个带有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索引)之上。在上面的示例中，似乎没有任何东西与iframe重叠，但每个元素的边界可能会稍微重叠。你可以使用Safari或Chrome中的web检查器来查看它。但是我会先把z-index放在iframe和那些弄乱了字体平滑的元素上。

Answer 2

我也遇到了这个问题，并像这样解决了它：

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

然后我将iFrame放在第二个div中。由于iFrame现在位于一个绝对定位的div中，它不再强制页面上的文本在Safari中加载页面时进行抗锯齿处理。