Bug Tracker

Opened 10 years ago

Closed 9 years ago

Last modified 8 years ago

#5445 closed bug (worksforme)

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.

Change History (6)

comment:1 Changed 9 years ago by addyosmani

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

comment:2 Changed 9 years ago by anonymous

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.

comment:3 Changed 9 years ago by sriolo@…

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

comment:4 in reply to:  2 Changed 9 years ago by jitter

Replying to anonymous:

this not work for me.

Replying to 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

comment:5 Changed 9 years ago by vbilenko

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

Last edited 9 years ago by vbilenko (previous) (diff)

comment:6 Changed 8 years ago by Yannis

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.

Note: See TracTickets for help on using tickets.