Draggable: jumps down with offset of scrollbar

I can confirm this issue and that it is a 1.10.3 regression. This is likely a draggable issue so I want to try to recreate this without a dialog. Hopefully that will help to pin down which of the 6 draggable fixes that landed in 1.10.3 might be suspect.

This seems like the most likely ticket that caused the change in behavior http://bugs.jqueryui.com/ticket/6258, but I haven't confirmed that yet.

#9320 is a duplicate of this ticket.

Another test case from #9320: http://jsfiddle.net/tj_vantoll/7sU9L/. Works fine in Chrome/Safari and in all browsers in 1.10.2. Fails in Firefox/Opera on 1.10.3.

This is caused by a88d64514001867b908776e6bfcfac7f1011970d.

#9354 is a duplicate of this ticket.

Draggable is affected since 1.10.3, simple demo here

http://jsfiddle.net/7AxXE/

no scrolling before dragging, clone is ok

scrolling down before dragging, clone is ko

when no clone, no bug.

#9379 is a possible duplicate.

I'm moving this ticket to ui.draggable it's a more generic problem than just dialogs.

#9405 is a duplicate of this ticket.

Do we currently have any workaround for this issue?

Replying to [comment:13 guhelouis]:

Do we currently have any workaround for this issue?

At the moment, no.

#9442 is a duplicate of this ticket.

#9447 is a duplicate of this ticket.

#9461 is a duplicate of this ticket.

I'll have a solution for this shortly.

Ultimately, this needs to needs to be fixed in blink, and is caused by https://code.google.com/p/chromium/issues/detail?id=157855 I'll workaround it for now, but this should be fixed upstream.

I found this as well, in my test it happens in all IE browsers (8/9/10) and FF:

here's the test:

http://jsbin.com/idofoq/4/edit

Draggable: Ignore scroll offsets for abspos draggables. Fixes #9315 - Draggable: jumps down with offset of scrollbar

Changeset: 263d07894493aafcdc6a565f9f9c079b4b8f5d80

I believe this affects ui.sortable as well.

Check with Firefox/IE. Scroll down then drag one of the elements.

http://jsfiddle.net/7AxXE/9/

#9517 is a duplicate of this ticket.

Hi,

changeset 263d07894493aafcdc6a565f9f9c079b4b8f5d80 does not solve the problem for me (http://jsfiddle.net/Sce5e/1/).

The workaround I found is to replace

 if (!this.offset.scroll) { 

by

 if (!this.offset.scroll || scroll.scrollTop() != this.offset.scroll.top || scroll.scrollLeft() != this.offset.scroll.left) { 

in the implementations of _convertPositionTo and _generatePosition in jquery.ui.draggable.js.

The execution is probably even faster if the condition is removed so that

 this.offset.scroll = {top : scroll.scrollTop(), left : scroll.scrollLeft()}; 

is always executed.

Indeed, this.offset.scroll is never updated when the page/container is scrolled (it is only set once when dragging starts and this.offset.scroll is false). In version 1.10.2, the returned values are calculated using scroll.scrollTop() and scroll.scrollLeft() in the return statement instead of using the (fixed) values from this.offset.scroll as it is in version 1.10.3.

Replying to [comment:24 tkhyn]:

Hi, changeset 263d07894493aafcdc6a565f9f9c079b4b8f5d80 does not solve the problem for me (http://jsfiddle.net/Sce5e/1/). The workaround I found is to replace

 if (!this.offset.scroll) { 

by

 if (!this.offset.scroll || scroll.scrollTop() != this.offset.scroll.top || scroll.scrollLeft() != this.offset.scroll.left) { 

in the implementations of _convertPositionTo and _generatePosition in jquery.ui.draggable.js. The execution is probably even faster if the condition is removed so that

 this.offset.scroll = {top : scroll.scrollTop(), left : scroll.scrollLeft()}; 

is always executed. Indeed, this.offset.scroll is never updated when the page/container is scrolled (it is only set once when dragging starts and this.offset.scroll is false). In version 1.10.2, the returned values are calculated using scroll.scrollTop() and scroll.scrollLeft() in the return statement instead of using the (fixed) values from this.offset.scroll as it is in version 1.10.3.

263d07894493aafcdc6a565f9f9c079b4b8f5d80 is in master and slated for 1.11. It is not in 1.10.3 which your test case is using.

Replying to [comment:25 tj.vantoll]:

263d07894493aafcdc6a565f9f9c079b4b8f5d80 is in master and slated for 1.11. It is not in 1.10.3 which your test case is using.

I'm aware of that, thanks. The test case is only there to show you the code I was using, as I had no knowledge of a way to include the master version in jsfiddle.

To test if the changeset fixed the problem, I got the draggable.js from the master and tested it on my machine. This did not fix the problem, and this is normal as the changeset does not correct the issue I explain in the above message.

In my opinion, this ticket should therefore be reopeoned.

EDIT : found a way to include jquery-ui master (sorry, I should have tried to do that before). Edited my fiddle accordingly http://jsfiddle.net/Sce5e/4/. Bug still there

Replying to [comment:26 tkhyn]:

Replying to [comment:25 tj.vantoll]: > 263d07894493aafcdc6a565f9f9c079b4b8f5d80 is in master and slated for 1.11. It is not in 1.10.3 which your test case is using. I'm aware of that, thanks. The test case is only there to show you the code I was using, as I had no knowledge of a way to include the master version in jsfiddle. To test if the changeset fixed the problem, I got the draggable.js from the master and tested it on my machine. This did not fix the problem, and this is normal as the changeset does not correct the issue I explain in the above message. In my opinion, this ticket should therefore be reopeoned. EDIT : found a way to include jquery-ui master (sorry, I should have tried to do that before). Edited my fiddle accordingly http://jsfiddle.net/Sce5e/4/. Bug still there

Ok, I see the behavior and that it did not occur in 1.10.2 and does in 1.10.3 and master: http://jsfiddle.net/tj_vantoll/c4CDc/

This only seems to occur when

top: 0

,

bottom: 0

, and

overflow: auto

are applied to the wrapper. If I remove any of those the issue is not present.

Although this is very similar I think this is a different problem. The bug for this ticket occurred only in Firefox and IE and your test case seems problematic in all browsers.

Could you explain why you need

overflow: auto

in your test case? And then we'll probably want to create a new ticket for your problem.

Thanks.

Replying to [comment:27 tj.vantoll]:

Could you explain why you need

overflow: auto

in your test case? And then we'll probably want to create a new ticket for your problem.

In my case I want only the #page_wrapper and not the body to be scrollable, so that the header is kept out of the scrollable area (and the scrollbar). It may be achieved in another way in my particular case to make the draggables work but the bug seems to affect any draggable inside an absolutely positioned scrollable element (which is not that uncommon I guess).

Sorry for having 'polluted' this ticket with an issue which - after a second reading - is indeed different and would definitely deserve a new ticket. I had read too many tickets about scrolling and draggables before posting and landed here :).

Replying to [comment:28 tkhyn]:

Replying to [comment:27 tj.vantoll]: > Could you explain why you need

overflow: auto

in your test case? And then we'll probably want to create a new ticket for your problem. In my case I want only the #page_wrapper and not the body to be scrollable, so that the header is kept out of the scrollable area (and the scrollbar). It may be achieved in another way in my particular case to make the draggables work but the bug seems to affect any draggable inside an absolutely positioned scrollable element (which is not that uncommon I guess). Sorry for having 'polluted' this ticket with an issue which - after a second reading - is indeed different and would definitely deserve a new ticket. I had read too many tickets about scrolling and draggables before posting and landed here :).

Thanks, that helps. Actually what you're experiencing is covered by #9379. I'll add your test case there.

#9545 is a duplicate of this ticket.

#9548 is a duplicate of this ticket.

#9556 is a duplicate of this ticket.

#9560 is a duplicate of this ticket.

This is now fixed in Webkit and Blink: https://bugs.webkit.org/show_bug.cgi?id=106133 and https://code.google.com/p/chromium/issues/detail?id=157855

#9589 is a duplicate of this ticket.

#9614 is a duplicate of this ticket.

#9687 is a duplicate of this ticket.

#9692 is a duplicate of this ticket.

#9699 is a duplicate of this ticket.

#9729 is a duplicate of this ticket.

#9736 is a duplicate of this ticket.

#9763 is a duplicate of this ticket.

#9765 is a duplicate of this ticket.

Something in Chrome seems to have changed to break this again.

To observe the broken behaviour in Chrome v32.0.1700.107, go to ThemeRoller (http://jqueryui.com/themeroller/) and open a dialog box. The box will jump down the page when you click on the drag handle.

That page is using 1.10.4, which doesn't contain this fix.

#9807 is a duplicate of this ticket.

#9828 is a duplicate of this ticket.

#9836 is a duplicate of this ticket.

#9835 is a duplicate of this ticket.

#9910 is a duplicate of this ticket.

1.10.4 still has this problem, it is not fixed

Replying to [comment:51 cyxjqui]:

1.10.4 still has this problem, it is not fixed

As the milestone says, the fix will be released in 1.11.0.

#9936 is a duplicate of this ticket.

#9941 is a duplicate of this ticket.

#9967 is a duplicate of this ticket.

#9976 is a duplicate of this ticket.

#10046 is a duplicate of this ticket.

#10066 is a duplicate of this ticket.

#9962 is a duplicate of this ticket.

#10080 is a duplicate of this ticket.

Using ui 1.11.0 this issue still occurs in chrome Version 35.0.1916.153

Replying to [comment:62 barb]:

Using ui 1.11.0 this issue still occurs in chrome Version 35.0.1916.153

Please include a test case that shows the issue.

Hello,

The other workaround is, you can use user agent and find the browser, apply the style

html, body
{
position:relative;
}

If anyone have a better workaround, please post.

Thanks

The above workaround by arjun didn't work in all browsers for me. As of today (March 9, 2015), the following CSS is the best workaround I've found. This works for all major browsers I've tested (Firefox, Chrome, Opera, Safari, IE11, IE10). It does NOT work for Internet Explorer 9 and below - I just disable the draggables for old IE:

/*
 * Hack to fix weird jquery ui draggable 'containment' issue when page is not scrolled to top
 * See http://bugs.jqueryui.com/ticket/9315
 */
@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome */
	html{
		position: relative;
	}
}
@-moz-document url-prefix() { /* firefox */
	body{
		position: relative;
		overflow: auto;
	}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* ie10+ */
	body{
		position: relative;
		overflow: auto;
	}
}

Nothing above worked for us in any version of 1.10.x. The following CSS solved it though.

Our issue was mostly in Chrome if you're scrolled down the page and using the draggable:

#!css
header, nav, main, footer, article, section, summary{
    position: relative;
}