Bug 25216 - Absolute positon div over iframe does not repaint correctly
: Absolute positon div over iframe does not repaint correctly
Status: UNCONFIRMED
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To: Nobody
http://www.vasinov.com/webkit/
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2009-04-15 11:38 PDT by Tommaso Buvoli
Modified: 2014-07-30 08:50 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Tommaso Buvoli 2009-04-15 11:38:55 PDT
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 Daniel Magliola 2009-05-11 16:32:59 PDT
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 Drew Beck 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.
Comment 3 Josh Christensen 2014-07-30 08:50:46 PDT
I had a similar issue using a video background with a fixed position and having my menu fixed as well.  Webkit would smear it and make it look duplicated at certain points.

I did some searching and found a fix.

I applied this on my element getting smeared.

-webkit-transform: translateZ(0);


Another one that has worked for some is:

-webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);