UNCONFIRMED 19923
offsetParent is incorrect for a child element of a position fixed element that itself is nested under a position relative element 
https://bugs.webkit.org/show_bug.cgi?id=19923
Summary offsetParent is incorrect for a child element of a position fixed element tha...
Saimon Moore
Reported 2008-07-07 06:05:42 PDT
Assuming the html shown below, * $('#trashbin').offsetParent incorrectly returns the #container element rather than the body element (or null as it really should be) Removing the position: relative line from #container css, fixes the problem. i.e. $('#trashbin').offsetParent now returns the 'body' element. Regards, Saimon #testOffsetParent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Testing offsetParent of children of 'fixed' elements in Safari</title> <style type="text/css"> html { height: 100%; } body { height: 100%; font-family: Helvetica; line-height: 2.2; font-size: 18px; text-align: center; color: blue; background-color: white; } #container { width: 320px; margin: 0 auto; position: relative; text-align: left; background-color: white; height: 100%; background: #111; height: 100%; min-height: 300px; } #header { height: auto; top: 0; position: fixed; z-index: 100; padding-bottom: 5px; margin-bottom: -5px; } #header #navigation { height: 40px; width: 40px; color: green; width: 320px; } #trashbin { margin: 0px; padding: 0px; border: 2px solid #d5d5d5; background-color: #f6f6f6; height: 80px; } ol.panels { border-top: 120px solid white; padding: 0 0 0 0; background: #111; } ol.panels li { height: 40px; width: 320px; display: block; text-indent: 5px; background-color: white; } </style> <script src="mootools-1.2-core.js" type="text/javascript"></ script> <!-- <script src="mootools-1.2-more.js" type="text/javascript"></ script> --> </head> <body> <div id="container"> <div id="header"> <div id="navigation">bla | bla | bla</div> <div id="overview"> <div id="trashbin"> this is the bin </div> </div> </div> <ul class='content'> <li>one</li> <li>two</li> <li>three</li> <li>three</li> <li>three</li> <li>three</li> <li>three</li> <li>three</li> <li>three</li> <li>three</li> <li>three</li> </ul> </div> </body> </html>
Attachments
test html file (26.98 KB, application/octet-stream)
2008-07-07 07:06 PDT, Saimon Moore 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Saimon Moore
Comment 1 2008-07-07 07:06:30 PDT
Created attachment 22130 [details] test html file Supplied along with a js file which just made my testing of offsetParent easier. i.e. can remove call to js and just use the web inspector
Gérard Talbot (no longer involved)
Comment 2 2008-11-20 21:38:42 PST
According to http://www.w3.org/TR/cssom-view/#offset-attributes " The offsetParent attribute, when called on element A, must return the element determined by the following algorithm: (...) 3. Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found: * The computed value of the position property is not static. " So, #trashbin.offsetParent == #container This is the correct and expected result. I think this bug is invalid. Regards, Gérard
Gérard Talbot (no longer involved)
Comment 3 2009-06-14 12:13:47 PDT
Oops! #header is a nearer ancestor and its position is not static. #header is the nearest non-static-ancestor of #trashbin within the containment hierarchy. So, according to CSSOM View Module spec., #trashbin.offsetParent == #header #trashbin.offsetParent should not be the body element. #trashbin.offsetParent should not be null. regards, Gérard
Note You need to log in before you can comment on or make changes to this bug.