Question

我在Safari中遇到了一个非常奇怪的绘图错误，我想知道是否有任何可行的解决方法......

我目前正在显示＆lt; div＆gt; （绝对定位，高z-index）在IFrame的顶部，显示来自其他站点的内容。仅为上下文，＆lt; div＆gt;是我们在其他网站上显示的工具栏。

这适用于所有浏览器，但在Safari中，当IFrame显示某些网站，并且用户在IFrame中滚动页面时，工具栏的图形会全部搞砸。< / p>

这是一个非常简约的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，或其他东西。似乎是一个规则（虽然它确实非常软）是“复杂”或“沉重”的网站倾向于触发它，而“轻”网站则没有。

我可以采取哪些措施来解决这个问题？

谢谢！

Answer 1

我希望在iframe上渲染时会出现意外情况，类似于将div放在Flash视频上时。它可以工作，有时也可以工作。但是在flash或iframe中滚动或移动可能会触发一些渲染问题。

你有没有机会使用与iframe不同的解决方案？使用像cURL这样的库来获取不同页面的数据就足够了吗？

在Safari中覆盖<div>上的<div>时绘制错误的解决方法？</iframe> </div>

1 个答案: