【发布时间】：2009-05-11 23:13:44
【问题描述】：
我在 Safari 中遇到了一个非常奇怪的绘图错误，我想看看是否有任何解决方法可以采取...
我目前正在显示来自其他网站的内容的 IFrame 顶部显示一个
（绝对定位，高 z-index）。就上下文而言，
是我们在其他网站上显示的工具栏。
这在所有浏览器中都适用，但在 Safari 中，当 IFrame 显示 一些 网站时，用户在 IFrame 中滚动页面时，工具栏的绘制就会变得一团糟。
这是一个重现问题的非常简约的 POC：
<html>
<head>
</head>
<body>
<div id="mainContainer" style="position: absolute; top: 0; left:0; height: 500px; width: 500px; border: 2px solid red;">
<div id="floatingToolbar" style="position: absolute; top: 20px; right: 20px; height: 40px; width: 300px; background-color: blue; color: red; z-index:200;">
Toolbar!
</div>
<iframe id="theIFrame" src="http://www.overstock.com/Clothing-Shoes/Skynyrd-Mens-Rock-Roll-Freebird-Lyric-T-shirt/3023049/product.html?sec_iid=33972" style="position: absolute; top: 0; left:0; height: 500px; width: 500px; border: 2px solid red;">
</iframe>
</div>
</body>
</html>
如果你把它保存到你的硬盘上，然后用 Firefox 打开它，你会得到这个：
（来源：crystalgears.com）
如果你在 Safari 中打开它，然后在 IFrame 中上下滚动，它会看起来像这样：
（来源：crystalgears.com）
现在，这只发生在 Safari 中。 Chrome 工作正常。 它发生在 Safari Windows 和 Mac 中。我正在使用 Safari Windows 3.2.1 (525.27.1) 进行测试，但我已经看到它发生在其他版本中。
为了让这更神秘，只有当我在 IFrame 中显示 一些 网站时才会发生这种情况。例如，如果您显示 www.google.com 或 www.stackoverflow.com，则工具栏可以正常工作。但是，www.overstock.com 或 www.amazon.com 内的项目运行良好。此外，给我这个问题的不仅仅是几个网站。 很多。我一直无法找到一些特别的东西来始终区分“坏”网站和“好”网站，但我还没有深入研究。也许它是 DOCTYPE，或者别的什么。似乎有一条规则（尽管它非常软）是“复杂”或“重”网站往往会触发它，而“轻”网站则不会。
关于我可以做些什么来解决这个问题的任何想法？
谢谢！
【问题讨论】：
-
哦！乐趣！它已经被报告为一个错误:-( https://bugs.webkit.org/show_bug.cgi?id=25216
-
作为记录，我在 Safari 4 Beta 中没有看到这个。