Bug 25216 - Absolute positon div over iframe does not repaint correctly
: Absolute positon div over iframe does not repaint correctly
Status: UNCONFIRMED
: WebKit
Layout and Rendering
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To:
: http://www.vasinov.com/webkit/
:
:
:
  Show dependency treegraph
 
Reported: 2009-04-15 11:38 PST by
Modified: 2011-12-12 11:26 PST (History)


Attachments


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2009-04-15 11:38:55 PST
I see this bug happen in the latest nightly build of webkit and all versions of safari and chrome. When an absolutely positioned div is placed over an absolutely positioned iframe, the div will not be painted properly and will smear, or disappear depending on the direction of scrolling.

It happens mostly when the iframe is navigated from a page without a scrollbar to a page with a scroll bar. In the example url i provided I start with an iframe pointing to google. Once you search and the page navigates to the results your scrollbar will appear, and scrolling will cause the div to hide or smear.
------- Comment #1 From 2009-05-11 16:32:59 PST -------
This bug can be reproduced with this little 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>
---------------

This should look like this:
http://www.crystalgears.com/temp/safariproblem_firefox.jpg

In Safari, after scrolling the Iframe, it looks like this:
http://www.crystalgears.com/temp/safariproblem_safari.jpg

---------------
Some other findings:

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.

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 show the bug. 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.
------- Comment #2 From 2011-12-12 11:26:20 PST -------
In testing I found that this only happens when the <html> element of the page within the iframe is styled with a background color. Removing the background color or setting it to transparent solved the problem for me.