Skip to main content

Bug Tracker

Side navigation

#8197 closed bug (wontfix)

Opened February 07, 2011 04:04PM UTC

Closed February 08, 2011 12:04AM UTC

Last modified March 14, 2012 02:00PM UTC

.offsetParent() returns wrong element in Firefox

Reported by: jdege@jdege.us Owned by:
Priority: low Milestone: 1.next
Component: offset Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

.offsetParent() is supposed to return the nearest positioned element, where "positioned" means it has a css position attribute of "relative", "absolute", or "fixed".

The problem is that in Firefox "position:relative" is ignored, when applied to table elements. A <td> element is never "positioned", even if it does have a position:relative css attribute. Yet JQuery's .offsetParent() returns the <td>, and .offset() returns coordinates relative to the <td>.

In IE8, "position:relative" in a <td> is processed, .offsetParent() returns the <td> and .offset() returns coordinates relative to the <td>.

In other words, JQuery behaves the same for both browsers. But since Firefox is handling the <td> very differently, it shouldn't.

The result is that using .offset on elements within a position:relative <td> returns incorrect values, and attempts to place position:absolute elements based on those values will draw them in the wrong position.

Example:

http://jsfiddle.net/K48r2/

Tested with:

JQuery version 1.5

JQuery version 1.4.4

Firefox 3.6.13 on Linux

Firefox 3.6.13 on Windows

IE 8.0.7600.16385 on Windows

Attachments (0)
Change History (1)

Changed February 08, 2011 12:04AM UTC by jitter comment:1

component: unfiledoffset
priority: undecidedlow
resolution: → wontfix
status: newclosed

You really shouldn't be trying to position: relative a td, that doesn't make much sense.

Your test case already includes the correct way to go about this (including a div with position relative inside the td).

The CSS specification say the following in the positioning schemes section:

>The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.