{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 成全新的幸福 的问题《Workaround for drawing bug when Overlaying a <div>》','https://www.manongdao.com/q-603590.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm getting a very weird drawing bug in Safari, and i would like to see if there's any workaround I could take...
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.
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.
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>
If you save that to your hard drive, and open it with Firefox, you'll get this:
(source: crystalgears.com)
And if you open it in Safari, and wildly scroll up and down inside the IFrame, it'll look like this:
(source: crystalgears.com)
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.
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?
Thanks!
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.
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?