覆盖a时绘制bug的解决方法 over an in Safari?

问题描述 投票：1回答：1

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

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

这适用于所有浏览器，但在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打开它，您将得到：

alt text （来源：crystalgears.com）

如果你在Safari中打开它，并在IFrame中上下滚动，它将如下所示：

alt text （来源：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，或其他东西。似乎是一条规则（虽然它确实非常软）是“复杂”或“重”网站倾向于触发它，而“轻”网站则不然。

我可以做些什么来解决这个问题？

谢谢！

iframe safari rendering
1个回答
1
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.