Draggable: jumps down with offset of scrollbar

[j_geronimo]

That appears only with using UI 1.10.3 and when the scrollbar is not at the very top in Firefox, Opera, IE8.

In Chrome works fine and also with 1.10.2 on other browsers.

The UI dialog demo page has this bug too:

1. drag the dialog down until appears the scrollbar
2. scroll down
3. again drag the dialog down.
4. dialog goes down with the offset

[tj.vantoll]

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.

[tj.vantoll]

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.

[tj.vantoll]

#9320 is a duplicate of this ticket.

[tj.vantoll]

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.

[Scott González]

This is caused by a88d64514001867b908776e6bfcfac7f1011970d.

[Scott González]

#9354 is a duplicate of this ticket.

[Gromsempai]

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.

[tj.vantoll]

#9379 is a possible duplicate.

[tj.vantoll]

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

[tj.vantoll]

#9405 is a duplicate of this ticket.

[guhelouis]

Do we currently have any workaround for this issue?

[tj.vantoll]

Replying to guhelouis:

Do we currently have any workaround for this issue?

At the moment, no.

[tj.vantoll]

#9442 is a duplicate of this ticket.

[tj.vantoll]

#9447 is a duplicate of this ticket.

[tj.vantoll]

#9461 is a duplicate of this ticket.

[mikesherov]

I'll have a solution for this shortly.

[mikesherov]

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.

[Valentin Plamadeala]

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

[Mike Sherov]

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

Changeset: 263d07894493aafcdc6a565f9f9c079b4b8f5d80

[dhonn]

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/

[tj.vantoll]

#9517 is a duplicate of this ticket.

[Thomas Khyn]

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.

[tj.vantoll]

Replying to 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.

[Thomas Khyn]

Replying to 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

[tj.vantoll]

Replying to tkhyn:

Replying to 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.

[Thomas Khyn]

Replying to 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 :).

[tj.vantoll]

Replying to tkhyn:

Replying to 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.

[tj.vantoll]

#9545 is a duplicate of this ticket.

[tj.vantoll]

#9548 is a duplicate of this ticket.

[tj.vantoll]

#9556 is a duplicate of this ticket.

[tj.vantoll]

#9560 is a duplicate of this ticket.

[mikesherov]

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

[tj.vantoll]

#9589 is a duplicate of this ticket.

[tj.vantoll]

#9614 is a duplicate of this ticket.

[Scott González]

#9687 is a duplicate of this ticket.

[tj.vantoll]

#9692 is a duplicate of this ticket.

[tj.vantoll]

#9699 is a duplicate of this ticket.

[Scott González]

#9729 is a duplicate of this ticket.

[tj.vantoll]

#9736 is a duplicate of this ticket.

[tj.vantoll]

#9763 is a duplicate of this ticket.

[tj.vantoll]

#9765 is a duplicate of this ticket.

[zootius]

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.

[Scott González]

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

[Scott González]

#9807 is a duplicate of this ticket.

[Scott González]

#9828 is a duplicate of this ticket.

[Scott González]

#9836 is a duplicate of this ticket.

[Scott González]

#9835 is a duplicate of this ticket.

[Scott González]

#9910 is a duplicate of this ticket.

[cyxjqui]

1.10.4 still has this problem, it is not fixed

[Scott González]

Replying to 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.

[Scott González]

#9936 is a duplicate of this ticket.

[Scott González]

#9941 is a duplicate of this ticket.

[tj.vantoll]

#9967 is a duplicate of this ticket.

[Scott González]

#9976 is a duplicate of this ticket.

[Scott González]

#10046 is a duplicate of this ticket.

[Scott González]

#10066 is a duplicate of this ticket.

[Scott González]

#9962 is a duplicate of this ticket.

[tj.vantoll]

#10080 is a duplicate of this ticket.

[barb]

Using ui 1.11.0 this issue still occurs in chrome Version 35.0.1916.153

[tj.vantoll]

Replying to 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.

[arjun]

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

[muley]

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;
        }
}

[cirkuitnet]

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:

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