[Webkit-unassigned] [Bug 19923] New: offsetParent is incorrect for a child element of a position fixed element that itself is nested under a position relative element

Mon Jul 7 06:05:43 PDT 2008

https://bugs.webkit.org/show_bug.cgi?id=19923

           Summary: offsetParent is incorrect for a child element of a
                    position fixed element that itself is nested under a
                    position relative element
           Product: WebKit
           Version: 526+ (Nightly build)
          Platform: Macintosh
        OS/Version: Mac OS X 10.5
            Status: UNCONFIRMED
          Severity: Major
          Priority: P2
         Component: HTML DOM
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: saimonmoore at gmail.com

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>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.