Opened 13 years ago

Closed 13 years ago

Last modified 10 years ago

#4438 closed bug (wontfix)

Helper is in the wrong position when body has position: relative and an offset relative to the document

Reported by: FernandoFerreira Owned by:
Priority: major Milestone:
Component: ui.selectable Version: 1.7.1
Keywords: selectable, helper Cc:
Blocked by: Blocking:


Attached to this bug report there is a minimal testcase to illustrate what happens when:

  1. The body has position: relative
  2. There is an offset between the body top (or left) and the document top (or left)

The abnormal behaviour is in the helper, whose position is offset by the same ammount the body is, in this example meaning 70px in each direction (50px because of the html padding, and 20px because of the body margin).

Drag the mouse cursor inside the green body to illustrate the bug.

What causes this bug is the assumption that origin point of the body (0,0) will be the same of the document, making the absolute coordinates of the helper relative to the body coincide with the one relative to the document. That happens to be true if the body position is static, delegating the origin point (0,0) to the document.

That ceases to be true when the body position is set to relative, triggering the condition for this bug to appear.

One possible solution is to discount the body offset in the value of pageX and pageY, the the lines [source:/trunk/ui/[email protected]#L67 67] and [source:/trunk/ui/[email protected]#L134 134] of the ui.selectable.js file, like this:

this.opos = [event.pageX - document.body.getClientRects()[0].left - (document.documentElement.scrollLeft || document.body.scrollLeft), event.pageY - document.body.getClientRects()[0].top - (document.documentElement.scrollTop || document.body.scrollTop)];


var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX - document.body.getClientRects()[0].left - (document.documentElement.scrollLeft || document.body.scrollLeft), y2 = event.pageY - document.body.getClientRects()[0].top - (document.documentElement.scrollTop || document.body.scrollTop);

Unfortunetaly, document.body.getClientRects() doesn't work on webkit based browsers, so this is probably not the right solution.

Attachments (1)

index.html (3.0 KB) - added by FernandoFerreira 13 years ago.
Minmal testcase to illustrate the bug

Download all attachments as: .zip

Change History (6)

Changed 13 years ago by FernandoFerreira

Attachment: index.html added

Minmal testcase to illustrate the bug

comment:1 Changed 13 years ago by Scott González

Resolution: wontfix
Status: newclosed

jQuery doesn't support dimensions-related methods when the body is positioned. You should use a wrapper div instead as a workaround.

comment:2 Changed 13 years ago by arikshtiv

But the bug also there when it's in a positioned wrapper div.

comment:3 Changed 13 years ago by Scott González

Duplicate of #4377.

comment:4 Changed 13 years ago by snoodle

My body is at (0,0), but the div I am specifying as my selectable is not at 0,0, and the lasso rectangle is off (from the mouse) by the offset of the div from 0,0. What is the work-around to this? Is this a bug?

comment:5 Changed 10 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.