覆盖< div>时绘制错误的解决方法在< iframe>上在Safari？ [英] Workaround for drawing bug when Overlaying a <div> over an <iframe> in Safari?
问题描述
我在Safari中得到了一个非常奇怪的绘图错误，我想知道是否有任何解决方法我可以采取...
I'm getting a very weird drawing bug in Safari, and i would like to see if there's any workaround I could take...
我目前显示< div> （绝对定位，高z-index）在IFrame的顶部，显示来自其他站点的内容。仅为上下文，< div>是我们在其他网站上显示的工具栏。
I'm currently displaying a <div> (absolutely positioned, high z-index) on top of an IFrame that displays contents from other sites. Just for context, the <div> is a toolbar we show over other sites.
这适用于所有浏览器，但在Safari中，当IFrame显示某些网站时，并且用户在IFrame中滚动页面，工具栏的图形全部搞砸了。
This works well in all browsers, but in Safari, when the IFrame is showing some sites, and the user scrolls the page in the IFrame, the drawing of the toolbar gets all screwed up.
这是一个非常简约的POC，可以重现问题：
Here is a very minimalistic POC that reproduces the problem:
<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打开它，你会得到这个：
If you save that to your hard drive, and open it with Firefox, you'll get this:
alt text http://www.crystalgears.com/temp/safariproblem_firefox.jpg
如果你在Safari中打开它，并在IFrame里面上下滚动，它将如下所示：
And if you open it in Safari, and wildly scroll up and down inside the IFrame, it'll look like this:
替代文字http://www.crystalgears.com/temp/safariproblem_safari.jpg
现在，这个仅在Safari中发生。 Chrome工作正常。
它发生在Safari Windows和Mac中。我正在测试Safari Windows 3.2.1（525.27.1），但我已经看到它发生在其他版本中。
Now, this only happens in Safari. Chrome works correctly. It happens in Safari Windows and Mac. I'm testing with Safari Windows 3.2.1 (525.27.1), but i've seen it happen in other versions.
为了使这更加神秘，它只是当我在IFrame中显示部分网站时会发生这种情况。例如，如果您显示www.google.com或www.stackoverflow.com，则工具栏可以正常运行。但是，www.overstock.com或www.amazon.com内的物品运作良好。此外，它不仅仅是几个网站给我这个问题。这是很多。我无法找到一些特殊的东西，将坏网站与好网站区分开来，但我看起来还不够深入。也许它是DOCTYPE，或其他东西。似乎是一个规则（虽然它确实非常软）是复杂或重网站倾向于触发它，而轻网站则不会。
To make this more mysterious, it only happens when I show some sites inside the IFrame. For example, if you show www.google.com or www.stackoverflow.com, the toolbar works perfectly. However, items inside www.overstock.com or www.amazon.com work well. Also, it's not only a few sites that give me this problem. It's a lot. I haven't been able to find some special thing that differentiates consistently the "bad" sites from the "good" ones, but I haven't looked deep enough. Maybe it's the DOCTYPE, or something else. What seems to be a rule (although it's admittedly very soft) is that "complex" or "heavy" sites tend to trigger it, while "light" sites don't.
我可以采取哪些措施来解决这个问题？
Any ideas of what I could do to work around this issue?
谢谢！
推荐答案
我希望在iframe上渲染时会出现意外情况，类似于将div放在flash视频上时。它可以工作，有时也可以工作。但是在flash或iframe中滚动或移动可能会触发一些渲染问题。
I would expect the unexpected when rendering on top of an iframe, similar to when a div is positioned over a flash video. It can work, and sometimes does. But scrolling or movement in the flash or iframe can trigger some rendering issues.
您是否有可能使用与iframe不同的解决方案？使用像cURL这样的库来获取不同页面的数据就足够了吗？
Is there any chance you could use a different solution then the iframe? Would using a library like cURL to get the data off a different page suffice?
这篇关于覆盖< div>时绘制错误的解决方法在< iframe>上在Safari？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
