Opened 10 years ago

Closed 7 years ago

#5912 closed bug (notabug)

Draggable: Avoid using scrollWidth and scrollHeight for containment calculations

Reported by: matt@… Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.draggable Version: 1.8.4
Keywords: scrollWidth, scrollHeight, webkit Cc:
Blocked by: Blocking:

Description

scrollWidth/scrollHeight should not be used to calculate containment since they produce inconsistent values between Webkit and all other browsers. It seems more straightforward to just rely on the offsetWidth/offsetHeight of the element.

Webkit browsers will calculate the scrollWidth and scrollHeight differently then all other browser in the following scenario:

Containment element for the Draggable module has absolutely positioned elements that overflow the container. Unless the overflow is set to hidden jQuery will use the scrollWidth and scrollHeight. In Webkit scrollWidth/scrollHeight includes the absolutely positioned elements while all other browsers do not.

co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top

Change History (5)

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

Milestone: TBD2.0.0

comment:2 Changed 8 years ago by mikesherov

Status: newopen
Summary: Using scrollWidth and scrollHeight for draggable containment is inconsistent between Webkit and other browserDraggable: Avoid using scrollWidth and scrollHeight for containment calculations

I agree this is wrong. Would be great to get a test case for this though.

comment:3 Changed 7 years ago by tj.vantoll

#7016 is a duplicate of this ticket.

comment:4 Changed 7 years ago by tj.vantoll

See #7016 for test case (http://jsfiddle.net/cLVYr/1/). I verified that simply using offsetWidth and offsetHeight fixes the problem in both Chrome and IE8.

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

Resolution: notabug
Status: openclosed

Removing the scrollWidth check and justing using offsetWidth doesn't actually fix containment. See #7016.

Note: See TracTickets for help on using tickets.