Workaround for drawing error when overlaying <div> on <iframe> in Safari?

I am getting a very strange drawing error in Safari and I would like to see if there is any workaround I could do ...

I am currently displaying a <div> (absolutely positioned, high z-index) on top of an IFrame that displays content from other sites. For context only, the <div> is the toolbar that we display on other sites.

This works well in all browsers, but in Safari, when the IFrame shows some sites and the user scrolls the page in the IFrame, the toolbar drawing is all screwed up.

Here is a very minimal 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 this to your hard drive and open it with Firefox, you get this:

alt text http://www.crystalgears.com/temp/safariproblem_firefox.jpg

And if you open it in Safari and scroll wildly up and down inside the IFrame, it looks like this:

alt text http://www.crystalgears.com/temp/safariproblem_safari.jpg

Now this one only happens in Safari. Chrome is working correctly. This happens in Safari Windows and Mac. I am testing Safari Windows 3.2.1 (525.27.1), but I have seen this happen in other versions.

To make it more cryptic, this happens when I display some sites inside an IFrame. For example, if you are showing www.google.com or www.stackoverflow.com the toolbar works fine. However, items inside www.overstock.com or www.amazon.com work well. Also, it's not just a few sites that give me this problem. That's a lot . I haven't been able to find any particular thing that consistently differentiates between "bad" sites and "good" ones, but I didn't look deep enough. Maybe it is DOCTYPE or something else. What seems to be the rule (although admittedly very lenient) is that "complex" or "heavy" sites tend to run it, whereas "light" sites don't.

Any ideas on what I could do to work around this issue?

Thanks!