If you take a look at your code (specifically your width being set for the field) you'll notice that you have a syntax error that can prevent browsers from correctly reading in the width of the field. If you correct this and provide field with the width 800px, you will see that Safari, Chrome, FireFox etc are all able to provide individual values for both the page position().left value and the field position().left value.

Live test case: http://jsbin.com/opife3/edit

this not work for me.

<div id="midiv">

<img id="myimg"></img>

</div>

style:

#mydiv{

width: 100%; height: 100% position:absolute; top:0; left:0;

}

#myimg{

display: block;

height: 100%;

width: auto;

margin: 0 auto;

}

and when i try to show alert( $("#myimg").position().left );

this return to me with value = 0.

I need to know the position of the image that is aligned to center with margin auto!¡

The problem is only in safari web browser. Firefox and Ie work fine.

Thanks.

i have the same problem. this bug is on chrome too. maybe a problem with webkit?

Replying to [comment:2 anonymous]:

this not work for me.

Replying to [comment:3 sriolo@…]:

i have the same problem. this bug is on chrome too. maybe a problem with webkit?

The jQuery bug tracker is not for support requests. Please use the jQuery Forum for support requests.

Unless you can be more specific what the bug should be and provide a working test case on http://jsfiddle.net. How to report bugs

This bug should be open.

I have the same error.

This exaple:

http://jsbin.com/opife3/edit

returns wrong values for Safari browser.

In any case offset() can be used instead position().

THE ISSUE: I just came across the same issue and I figured out what is going on. The problem is on how webkit based browsers render/interpret the CSS box model in this particular case.

TEST CASE:

Here is a simple test case for illustrating the difference in reported position().left and css("marginLeft") values between webkit and other rendering engines. http://jsfiddle.net/6Nexn/3/

DESCRIPTION:

When an element's left and right margins are set to "auto" in order to center it horizontally as in the test case, Firefox and IE8 report position().left equal to the distance from the edge of the container and css("marginLeft") "auto" (IE8) or "0px" (Firefox). In contrast, webkit (tested on safari5 winXP) reports them the other way around, that is, position().left==0 and css("marginLeft") equal to the distance from the container's edge. This is clearly a browser difference on how they handle margins set to "auto" and not a bug on jquery's end. It will be good though if it can be managed transparently by jquery so that the user does not have to handle this exception in browser behaviour.

POSSIBLE SOLUTION:

This is not a generic solution but rather a domain specific solution which I used for the purposes of the project I met this issue on. Using

leftValue = parseInt($('#inner').css("marginLeft")) +

$('#inner').position().left;

is a simple approach that worked for my purposes giving me a cross-browser consistent value. However, a more elaborate approach should be taken for a generic solution within jquery.

Thanks.