Summary: | Absolute positon div over iframe does not repaint correctly | ||
---|---|---|---|
Product: | WebKit | Reporter: | Tommaso Buvoli <tommasobuvoli> |
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
Status: | UNCONFIRMED --- | ||
Severity: | Normal | CC: | dmagliola, drew, eth1kz.j3 |
Priority: | P2 | ||
Version: | 528+ (Nightly build) | ||
Hardware: | All | ||
OS: | All | ||
URL: | http://www.vasinov.com/webkit/ |
Description
Tommaso Buvoli
2009-04-15 11:38:55 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. 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. 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); |