IE: getOffsetParent returns body instead of relative positioned parent element

[jerome8]

Scenario: I have a simple text input field that uses scriptaculous Ajax.autocomplete inside a parent div with position: relative.

Result: Resultlist will be positioned wrong in IE9-11 because the calculation of the top value is incorrect.

I traced it down to element.offsetParent which is returning the body instead of the relative positioned parent. Seems to be a IE bug imo.

Suggestion: Use element.parentNode loop until a better workaround is found.

[laurinkeithdavis]

Isn't this the same issue as https://github.com/sstephenson/prototype/issues/156 ?

[jerome8]

Well, yes it looks the same.

Imo

if (!isInline && element.offsetParent) return $(element.offsetParent);

should be changed to

if (!isInline && element.offsetParent && element.offsetParent != document.body) return $(element.offsetParent);

[savetheclocktower]

I've got to say that this is more information than I usually get about layout-related issues, but I can't reproduce this one.

Our test cases already test scenarios where an element is the offset child of a relatively-positioned element, and those all pass in IE 9–11.

But all that happens deep within an absolutely-positioned context, so I tried creating a new test case with this HTML…

<div id="body_relative" style="position: relative;">
  <div id="relative_absolute" style="position: absolute; top: 10px; left: 10px"></div>
</div>

…and making this assertion…

assert.equal('body_relative', $('relative_absolute').getOffsetParent().id,
 '#body_relative should be parent of #relative_absolute');

…and that passes in IE 10.

I feel really weird about applying a fix for a bug I can't reproduce.

[savetheclocktower]

Tentatively marking this as a bug just for triage purposes.

[laurinkeithdavis]

I'm pretty sure that this was fixed in https://github.com/sstephenson/prototype/issues/156.

[savetheclocktower]

Yeah, looks that way on closer inspection. Closing.