Firefox reports incorrect left position when margin is "auto"

Reported by:	ryannaddy	Owned by:	petro
Priority:	high	Milestone:	1.next
Component:	offset	Version:	1.7.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

Using the following code:

$(window).ready(function(){
	var con = $("#container");
	conP = con.position();
	alert(conP.left);
});

Internet explorer 9 displays an invalid left positioning, while chrome/Firefox displays it correctly.

The CSS is as follows:

#container{
	width: 1000px;
	margin: auto;
	margin-top: 40px;
	box-shadow: 0 0 20px rgba(0,0,0,.7);
}

Using the example above, in Chrome/Firefox the above alert box may display 150 while Internet Explorer displays 0.5

Attachments (0)

Change History (9)

Changed December 27, 2011 10:57PM UTC by sindresorhus comment:1

owner:	→ ryannaddy
status:	new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

Changed December 27, 2011 11:55PM UTC by ryannaddy comment:2

_comment0:	The example is as follows: \ \ http://jsfiddle.net/Stgdb/1/ \ \ Again, this works in Chrome/Firefox, but not Internet Explorer. → 1325036802241342
status:	pending → new

The example is as follows:

http://jsfiddle.net/Stgdb/1/

Again, this works in Chrome/Firefox, but not Internet Explorer 9.

I noticed that in Internet Explorer 8 it works fine.

Changed January 18, 2012 12:32AM UTC by mikesherov comment:3

component:	unfiled → offset
priority:	undecided → high

Changed January 18, 2012 12:34AM UTC by mikesherov comment:4

summary:	Internet Explorer position left cacluations → Internet Explorer 9 reports incorrect left position when margin is "auto"

Changed January 18, 2012 10:42PM UTC by mikesherov comment:5

milestone:	None → 1.next
status:	new → open

Changed February 21, 2012 09:03PM UTC by gregc comment:6

Is there a workaround for this? I am also experiencing this issue and it's sort of a show stopper.

Changed June 19, 2012 12:18PM UTC by mikesherov comment:7

summary:	Internet Explorer 9 reports incorrect left position when margin is "auto" → IE9 and Webkit reports incorrect left position when margin is "auto"

Changed October 16, 2012 05:24PM UTC by timmywil comment:8

owner:	ryannaddy → petro
status:	open → assigned

Changed October 16, 2012 09:21PM UTC by petro comment:9

resolution:	→ cantfix
status:	assigned → closed
summary:	IE9 and Webkit reports incorrect left position when margin is "auto" → Firefox reports incorrect left position when margin is "auto"

Actually, Webkit and IE9 are correct and Firefox is incorrect. position() ''should'' return the offset of the element relative to its nearest positioned ancestor, ''including'' the element's margins. Thus, the margins of the element shouldn't affect the returned position.

However, Firefox doesn't compute this offset correctly and as a result jQuery returns not only an incorrect position() but also an incorrect css("margin-left"). Compare the fiddle below in FF and Webkit/IE to see the difference:

http://jsfiddle.net/mpetrovich/jRVXq/

This difference in behavior is ultimately caused by Firefox's version of window.getComputedStyle() which incorrectly returns 0px for margin-left when the declared margin is "auto":

http://jsfiddle.net/mpetrovich/yvj9b/

There's an open issue with Mozilla to fix getComputedStyle() to match the spec (and Webkit/IE):

https://bugzilla.mozilla.org/show_bug.cgi?id=381328

Since there isn't an efficient way to determine whether an element has margin: auto applied, this Firefox issue cannot be reliably caught and polyfilled. Thus, we're closing this issue as Can't Fix for now.

Side navigation

#11110 closed bug (cantfix)