Why does jQuery .css('left') and .position().left return different values?

jquery google-chrome jquery-animate
Gaurav Dadhania picture Gaurav Dadhania · Aug 8, 2012 · Viewed 53.5k times · Source

The values I'm getting for $(el).css('left') and $(el).position().left are different?

If I go $(el).css('left', '100px'), then $(el).css('left') it returns 110px instead of 100px (yes, it is always 10% more) and if I evaluate $(el).position().left, it gives me 100.

Why does Chrome behave this way? You can see how this would affect jQuery animations using the left property.

I'm using Chrome 21.0.1180.57 on Ubuntu.

EDIT 1: Seems to be only affecting Chrome, FF 14.0.1 is giving me the same values.

Answer

Esailija picture Esailija · Aug 8, 2012

The left returns calculated value of the CSS left property.

position().left returns the x-coordinate relative to the element's first offset parent.

These values can be equal and they can be not equal .

position().left can also easily be different between browsers because of different rendering whereas .css("left") can only differ in the units given, if that.

Related questions

Why are my jQuery animations choppy in webkit-based browsers?

I'm working with a very simple animation: sliding a line of images to the left: $('#button').click( function() { $('div#gallery').animate({scrollLeft:'+=800px'}, 1000); } ); (It's supposed to be an image gallery; I hide the overflow to show only one …

Read More
Jquery hide() and show() runs too slow in google chrome

I have a web application that doesn't run correctly in chrome. Works perfectly in Firefox. I have a page with a large numbered of list items, 316 to be exact. Each list item contains a large amount of HTML. My problem …

Read More
jQuery `.is(":visible")` not working in Chrome

if ($("#makespan").is(":visible") == true) { var make = $("#make").val(); } else { var make = $("#othermake").val(); } Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></…

Read More