Skip to main content

Bug Tracker

Side navigation

#5445 closed bug (worksforme)

Opened November 03, 2009 02:00PM UTC

Closed October 06, 2010 02:29AM UTC

Last modified March 10, 2012 10:46AM UTC

position() returns wrong value in Safari when margin: 0 auto;

Reported by: repthe415 Owned by: brandon
Priority: major Milestone: 1.4
Component: dimensions Version: 1.3.2
Keywords: position Cc:
Blocked by: Blocking:
Description

Expierenced problems with the position() function when:

<div id="page" style="width: 900px; margin: 0 auto;>

<div id="field" style="width; 800; margin: 0 auto; position: relative; text-align:left;"> CONTENT </div>

</div>

trying to get info from $("#field").position().left. This is returning the left position of the parent element #page and not #field. Only occured under Safari Mac, was good on Chrome, Firefox and IE. Setting a fixed margin helps solving this problem but not fixing the behavior of .position() This might occur on other browsers and systems.

Attachments (0)
Change History (6)

Changed October 06, 2010 02:29AM UTC by addyosmani comment:1

resolution: → worksforme
status: newclosed

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

Changed November 16, 2010 04:00PM UTC by anonymous comment:2

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.

Changed November 23, 2010 10:03PM UTC by sriolo@raptus.com comment:3

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

Changed November 24, 2010 08:41AM UTC by jitter comment:4

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

Changed January 31, 2011 02:41PM UTC by vbilenko comment:5

_comment0: 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().1296484927772190
_comment1: This bug should be open.[[BR]] \ I have the same error.[[BR]][[BR]] \ \ This exaple:[[BR]] \ [http://jsbin.com/opife3/edit] [[BR]] \ returns wrong values for Safari browser.[[BR]] \ [[BR]] \ In any case offset() can be used instead position().1296484949978025

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().

Changed July 07, 2011 12:02AM UTC by Yannis comment:6

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.