Offset() on position:fixed inside a div incorrect in Webkit browsers

[BenBernanke]

I'm using jQuery 1.3.2 and seeing different results on the offset() call when using position:fixed for CSS if the element's inside a div.

A fixed-position button will have it's offset().top value increase as you scroll down the screen. However, if you put a <div> around the floating button, it always returns the same value.

Firefox 3.1 and IE 7 report the expected/correct position for the floating element inside a <div>. Chrome 1.0.154.48 and Safari 3.2 (525.26.13) report the same position every time.

Test case attached.

[BenBernanke]

Position-Fixed Test Case

[joelg]

I have managed to fix this issue by modifying the core:

Add the following after jquery-1.3.2.js line 4206:

if ( computedStyle.position === "fixed" )

top += Math.max(docElem.scrollTop, body.scrollTop);

left += Math.max(docElem.scrollLeft, body.scrollLeft);

This comes after a line with the following code:

left += parseInt( computedStyle.borderLeftWidth, 10)

0;

And before a line as follows:

prevComputedStyle = computedStyle;

That should do it,

I am aware it is not elegant to be changing the core, is there a better way to make fixes such as this, by extending the core?

I will attach my modified jquery-1.3.2.js (my fixes are lines 4208-4210).

Joel Gascoigne ​http://twitter.com/joelg87

[joelg]

Modified jquery-1.3.2.js to fix the offset() issue.

[joelg]

Just a quick note, the fix I have posted above may not work as expected if there is more than one parent of the element which has position: fixed. I suggest that it should stop adding to "top" and "left" when it finds the first parent, if this is an issue people come across. Though it seems wrong to me to code an element to have two parents with fixed position.

[brandon]

Fixed in r6284