Side navigation
#4263 closed bug (fixed)
Opened February 27, 2009 01:47AM UTC
Closed March 19, 2009 02:55AM UTC
Last modified March 14, 2012 03:15PM UTC
Offset() on position:fixed inside a div incorrect in Webkit browsers
| Reported by: | BenBernanke | Owned by: | brandon |
|---|---|---|---|
| Priority: | major | Milestone: | 1.4 |
| Component: | offset | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
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.
Attachments (2)
Change History (3)
Changed March 16, 2009 12:09AM UTC by comment:1
Changed March 16, 2009 12:46AM UTC by comment:2
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.
Changed March 19, 2009 02:55AM UTC by comment:3
| resolution: | → fixed |
|---|---|
| status: | new → closed |
Fixed in r6284
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