Firefox reports incorrect left position when margin is "auto"

[ryannaddy]

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

[sindresorhus]

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.

[ryannaddy]

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.

[gregc]

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

[petro]

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.