Search and Top Navigation
#5912 closed bug (notabug)
Opened August 06, 2010 08:18PM UTC
Closed April 09, 2013 12:12PM UTC
Draggable: Avoid using scrollWidth and scrollHeight for containment calculations
Reported by: | matt@zurb.com | 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
Attachments (0)
Change History (5)
Changed October 11, 2012 09:07PM UTC by comment:1
milestone: | TBD → 2.0.0 |
---|
Changed October 26, 2012 04:58AM UTC by comment:2
status: | new → open |
---|---|
summary: | Using scrollWidth and scrollHeight for draggable containment is inconsistent between Webkit and other browser → Draggable: Avoid using scrollWidth and scrollHeight for containment calculations |
I agree this is wrong. Would be great to get a test case for this though.
Changed January 23, 2013 02:38AM UTC by comment:4
See #7016 for test case (http://jsfiddle.net/cLVYr/1/). I verified that simply using
offsetWidthand
offsetHeightfixes the problem in both Chrome and IE8.