Bug Tracker

Opened 8 years ago

Closed 7 years ago

#11110 closed bug (cantfix)

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

Change History (9)

comment:1 Changed 8 years ago by sindresorhus

Owner: set to ryannaddy
Status: newpending

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.

comment:2 Changed 8 years ago by ryannaddy

Status: pendingnew

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.

Last edited 8 years ago by ryannaddy (previous) (diff)

comment:3 Changed 8 years ago by mikesherov

Component: unfiledoffset
Priority: undecidedhigh

comment:4 Changed 8 years ago by mikesherov

Summary: Internet Explorer position left cacluationsInternet Explorer 9 reports incorrect left position when margin is "auto"

comment:5 Changed 8 years ago by mikesherov

Milestone: None1.next
Status: newopen

comment:6 Changed 8 years ago by gregc

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

comment:7 Changed 7 years ago by mikesherov

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

comment:8 Changed 7 years ago by timmywil

Owner: changed from ryannaddy to petro
Status: openassigned

comment:9 Changed 7 years ago by petro

Resolution: cantfix
Status: assignedclosed
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.

Note: See TracTickets for help on using tickets.