Skip to main content

Bug Tracker

Side navigation

#8195 closed bug (invalid)

Opened February 07, 2011 01:34PM UTC

Closed February 08, 2011 12:41AM UTC

Last modified March 14, 2012 07:32PM UTC

offset(coordinates) setter does not work properly with position:fixed div and Chrome/ Safari (fiddle inside)

Reported by: jfremy@virtuoz.com Owned by:
Priority: low Milestone: 1.next
Component: offset Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

Fiddle demonstrating the bug: http://jsfiddle.net/jfremy/KG7x7/

Expected result: show the div at location 200,100. Written in white against a black background.

When setting the offset of a fixed position div under chrome / safari, the div is incorrectly positioned.

In jsfiddle, this happens with Jquery 1.4+ (works fine in Jquery 1.2 and 1.3).

I initially discovered the bug while using Jquery UI position but pinpointed it to jquery setOffset function.

It works fine with IE8 and FF3.6.

Attachments (0)
Change History (1)

Changed February 08, 2011 12:41AM UTC by jitter comment:1

_comment0: Thanks for taking the time to contribute to the jQuery project by writing a bug report and providing a test case! \ \ After checking your report I came to the conclusion that this isn't a jQuery bug but rather an unfortunate use of CSS. \ \ Just think about what you are doing. You first set bottom/right and later on specify top/left too. But the values are set in a manner that it's impossible for the browser to satisfy both constraints (top vs bottom and left vs right) at the same time. And thus you end up with unspecified behavior which differs across browsers. \ \ So either refrain form using bottom/right and top/left at the same time or try something along the lines of http://jsfiddle.net/jitter/KG7x7/15/ (resetting bottom/right and then setting top/left)1297125719427530
component: unfiledoffset
priority: undecidedlow
resolution: → invalid
status: newclosed

Thanks for taking the time to contribute to the jQuery project by writing a bug report and providing a test case!

After checking your report I came to the conclusion that this isn't a jQuery bug but rather an unfortunate use of CSS.

Just think about what you are doing. You first set bottom/right and later on specify top/left too. But the values are set in a manner that it's impossible for the browser to satisfy both constraints (top vs bottom and left vs right) at the same time. And thus you end up with unspecified behavior which differs across browsers.

So either refrain form using bottom/right and top/left at the same time or try something along the lines of http://jsfiddle.net/jitter/KG7x7/15/ (resetting bottom/right and then setting top/left)

Related ticket #7701