Ticket #9315 (closed bug: fixed)

Opened 16 months ago

Last modified 7 days ago

Draggable: jumps down with offset of scrollbar

Reported by: j_geronimo Owned by: mikesherov
Priority: blocker Milestone: 1.11.0
Component: ui.draggable Version: 1.10.3
Keywords: regression Cc:
Blocking: Blocked by:

Description

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

Change History

comment:1 Changed 16 months ago by tj.vantoll

  • Status changed from new to open

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.

comment:2 Changed 16 months ago by 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.

comment:3 Changed 16 months ago by tj.vantoll

#9320 is a duplicate of this ticket.

comment:4 Changed 16 months ago by 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.

comment:5 Changed 16 months ago by scott.gonzalez

comment:6 Changed 16 months ago by scott.gonzalez

  • Keywords regression added
  • Priority changed from minor to blocker
  • Milestone changed from none to 1.11.0

comment:7 Changed 16 months ago by scott.gonzalez

  • Owner set to mikesherov
  • Status changed from open to assigned

comment:8 Changed 16 months ago by scott.gonzalez

#9354 is a duplicate of this ticket.

comment:9 Changed 16 months ago by 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.

comment:10 Changed 15 months ago by tj.vantoll

#9379 is a possible duplicate.

comment:11 Changed 15 months ago by tj.vantoll

  • Component changed from ui.dialog to ui.draggable
  • Summary changed from Draggable dialog jumps down with offset of scrollbar to Draggable: jumps down with offset of scrollbar

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

Last edited 14 months ago by tj.vantoll (previous) (diff)

comment:12 Changed 15 months ago by tj.vantoll

#9405 is a duplicate of this ticket.

comment:13 follow-up: ↓ 14 Changed 14 months ago by guhelouis

Do we currently have any workaround for this issue?

comment:14 in reply to: ↑ 13 Changed 14 months ago by tj.vantoll

Replying to guhelouis:

Do we currently have any workaround for this issue?

At the moment, no.

comment:15 Changed 14 months ago by tj.vantoll

#9442 is a duplicate of this ticket.

comment:16 Changed 14 months ago by tj.vantoll

#9447 is a duplicate of this ticket.

comment:17 Changed 14 months ago by tj.vantoll

#9461 is a duplicate of this ticket.

comment:18 Changed 14 months ago by mikesherov

I'll have a solution for this shortly.

comment:19 Changed 13 months ago by mikesherov

  • Keywords regression, blink added; regression removed

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.

comment:20 in reply to: ↑ description Changed 13 months ago by omuleanu

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

comment:21 Changed 13 months ago by Mike Sherov

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Changeset: 263d07894493aafcdc6a565f9f9c079b4b8f5d80

comment:22 Changed 13 months ago by 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/

comment:23 Changed 13 months ago by tj.vantoll

#9517 is a duplicate of this ticket.

comment:24 follow-up: ↓ 25 Changed 13 months ago by 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.

Last edited 13 months ago by tkhyn (previous) (diff)

comment:25 in reply to: ↑ 24 ; follow-up: ↓ 26 Changed 13 months ago by 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.

comment:26 in reply to: ↑ 25 ; follow-up: ↓ 27 Changed 13 months ago by 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

Last edited 13 months ago by tkhyn (previous) (diff)

comment:27 in reply to: ↑ 26 ; follow-up: ↓ 28 Changed 13 months ago by 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.

comment:28 in reply to: ↑ 27 ; follow-up: ↓ 29 Changed 13 months ago by 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 :).

Last edited 13 months ago by tkhyn (previous) (diff)

comment:29 in reply to: ↑ 28 Changed 13 months ago by 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.

comment:30 Changed 12 months ago by tj.vantoll

#9545 is a duplicate of this ticket.

comment:31 Changed 12 months ago by tj.vantoll

#9548 is a duplicate of this ticket.

comment:32 Changed 12 months ago by tj.vantoll

#9556 is a duplicate of this ticket.

comment:33 Changed 12 months ago by tj.vantoll

#9560 is a duplicate of this ticket.

comment:34 Changed 12 months ago by mikesherov

  • Keywords regression added; regression, blink removed

comment:35 Changed 12 months ago by tj.vantoll

#9589 is a duplicate of this ticket.

comment:36 Changed 11 months ago by tj.vantoll

#9614 is a duplicate of this ticket.

comment:37 Changed 10 months ago by scott.gonzalez

#9687 is a duplicate of this ticket.

comment:38 Changed 10 months ago by tj.vantoll

#9692 is a duplicate of this ticket.

comment:39 Changed 9 months ago by tj.vantoll

#9699 is a duplicate of this ticket.

comment:40 Changed 8 months ago by scott.gonzalez

#9729 is a duplicate of this ticket.

comment:41 Changed 8 months ago by tj.vantoll

#9736 is a duplicate of this ticket.

comment:42 Changed 8 months ago by tj.vantoll

#9763 is a duplicate of this ticket.

comment:43 Changed 8 months ago by tj.vantoll

#9765 is a duplicate of this ticket.

comment:44 Changed 7 months ago by 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.

comment:45 Changed 7 months ago by scott.gonzalez

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

comment:46 Changed 7 months ago by scott.gonzalez

#9807 is a duplicate of this ticket.

comment:47 Changed 7 months ago by scott.gonzalez

#9828 is a duplicate of this ticket.

comment:48 Changed 7 months ago by scott.gonzalez

#9836 is a duplicate of this ticket.

comment:49 Changed 7 months ago by scott.gonzalez

#9835 is a duplicate of this ticket.

comment:50 Changed 6 months ago by scott.gonzalez

#9910 is a duplicate of this ticket.

comment:51 follow-up: ↓ 52 Changed 6 months ago by cyxjqui

1.10.4 still has this problem, it is not fixed

comment:52 in reply to: ↑ 51 Changed 6 months ago by scott.gonzalez

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.

comment:53 Changed 6 months ago by scott.gonzalez

#9936 is a duplicate of this ticket.

comment:54 Changed 6 months ago by scott.gonzalez

#9941 is a duplicate of this ticket.

comment:55 Changed 5 months ago by tj.vantoll

#9967 is a duplicate of this ticket.

comment:56 Changed 5 months ago by scott.gonzalez

#9976 is a duplicate of this ticket.

comment:57 Changed 4 months ago by scott.gonzalez

#10046 is a duplicate of this ticket.

comment:58 Changed 4 months ago by scott.gonzalez

#10066 is a duplicate of this ticket.

comment:59 Changed 4 months ago by scott.gonzalez

#9962 is a duplicate of this ticket.

comment:60 Changed 4 months ago by tj.vantoll

#10080 is a duplicate of this ticket.

comment:61 Changed 3 months ago by barb

Last edited 3 months ago by barb (previous) (diff)

comment:62 follow-up: ↓ 63 Changed 3 months ago by barb

Using ui 1.11.0 this issue still occurs in chrome Version 35.0.1916.153

comment:63 in reply to: ↑ 62 Changed 3 months ago by 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.

comment:64 Changed 7 days ago by 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

Last edited 7 days ago by arjun (previous) (diff)
Note: See TracTickets for help on using tickets.