Opened 12 years ago

Closed 6 years ago

#4074 closed bug (fixed)

Sortable: Jump when dragging item from page scrolled to bottom

Reported by: sutt Owned by:
Priority: major Milestone: 1.8.21
Component: ui.sortable Version: 1.6rc6
Keywords: sortable, jump, refresh Cc:
Blocked by: Blocking:

Description

I have a testcase developed. It's not "minimal", in that I added a few screen elements so the screen refresh and jump would be more obvious.

http://www.chrisnelsonphotography.com/jquery_ui/sortable_anomaly.html

There are instructions on the page for duplicating the issue. I can reproduce the anomaly in Firefox 3.0x and 3.1x, and Safari 3.1x and 3.2x. Safari does not have the screen refresh problem, but the page does "jump".

Basically, if you scroll the page to the bottom (so that the final list element is visible), and attempt to drag one of the elements in the sortable list of images, a screen jump occurs (in Firefox and Safari), and a screen flash or refresh occurs (in Firefox). These anomalies do not occur if you are scrolled up the page and initiate a drag when the list's final image is not visible at all on the screen.

This bug is actually visible in the demos on the JQuery UI site, on this page:

http://ui.jquery.com/demos/sortable/default.html

To reproduce, resize the window so that the page scrolls, but when you scroll to the bottom, you can see the final elements in the list. Now click on one and start a drag (just a few pixels is required, it can even be a small drag horizontally). You will see the page "jump".

I created the test case to make the effect more obvious.

*IE 7 displays a completely different bug, which will need to be addressed in another ticket, if it is not already being tracked.

Change History (20)

comment:1 Changed 12 years ago by sutt

Sorry, meant to assign this to the ui.sortable component...

comment:2 Changed 12 years ago by rdworth

Component: ui.coreui.sortable

comment:3 Changed 12 years ago by rdworth

Milestone: TBD1.6

comment:4 Changed 12 years ago by sutt

Seems this is related to the offsets calculated at the time the helper is created. If the sortable has the helper option set to 'clone', the page flash/jump still occurs, but the second flash/jump (as described on the test page linked to above), does not.

comment:5 Changed 11 years ago by rdworth

Milestone: 1.71.8

comment:6 Changed 11 years ago by sutt

Sorry - I just updated my website, and it broke the link to the example. I will fix it this evening after work.

comment:7 Changed 11 years ago by sutt

I have fixed the link to the demonstration of the bug. Sorry about that.

comment:8 Changed 11 years ago by benjaminfield

I had this same problem with an unrelated project where I was removing a large number of <br /> tags from a div on a click event. Somehow, removing the breaks caused Firefox to refresh the entire screen, and Safari to jump around.

For Safari's jumping, I grabbed the scrollTop before removing the breaks, then set it back to the previous value after removing. var scrollTop = $(window).scrollTop(); ...remove... $(window)scrollTop(scrollTop);

Firefox was tougher, and didn't respond to the scrollTop fix. I tried just hiding the breaks (display: none, addClass('myHiddenStyle') rather than removing them. I tried removing them after fading them out. Neither worked. My solution was to make the breaks position: absolute before removing them. $(breakItem).css('position', 'absolute').remove();

comment:9 Changed 10 years ago by kschaller

This also occurs in Chrome 5.0.307.11 beta (Mac). Setting a CSS height on the containing element seems to alleviate the problem, but it's a pain to have to calculate that every time an element is added or removed from the sortable list.

comment:10 Changed 10 years ago by Digitalxero

Any updates on this issue. Though I think the issue is more with FF since I no longer see the jump/flash in IE7/8, Chrome or Safari.

comment:11 Changed 10 years ago by samhamilton

This bug still exists in the latest version of ui (1.8.9)

I have tested this on firefox 3.6.8, IE7, IE8 & Safari 4.04

It only occurs when the sortable list items dictate the height of the page, which is a real issue when dealing with larger lists or a sortable interface.

A quick and dirty fix is to get the document height and assign it to the body tag after each drag, but this seems to offset the drop in IE7.

comment:12 Changed 9 years ago by travisp

Still seeing this in 1.8.16 in the previously mentioned browsers in Firefox 7 and Chrome 15.0.874.121 on Windows and Linux.

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

Milestone: 1.9.02.0.0

comment:14 Changed 8 years ago by petersendidit

Status: newopen
Summary: Sortable has an anomalous screen flash (refresh) and jump when dragging item from page scrolled to bottom.Sortable: Anomalous screen flash (refresh) and jump when dragging item from page scrolled to bottom.

comment:15 Changed 7 years ago by tj.vantoll

Test case against master - http://jsfiddle.net/tj_vantoll/CVPtJ/. I don't see the flash anymore but all browsers display the jump when the drag starts on the last item.

comment:16 Changed 7 years ago by tj.vantoll

#9309 is a duplicate of this ticket.

comment:17 Changed 7 years ago by tj.vantoll

Summary: Sortable: Anomalous screen flash (refresh) and jump when dragging item from page scrolled to bottom.Sortable: Jump when dragging item from page scrolled to bottom

Much nicer test case from @KaneCohen in #9309: http://jsfiddle.net/TnCZ8/.

"Problem occurs when sortable list happens to be at the bottom of the page with scollbar. If you try to sort, window scroll will jump up for a height of a sortable item. Could be seen here: http://jsfiddle.net/TnCZ8/.

Resize your browser so that there's a scrollbar and try to sort)"

I also removed the "flash" portion from the title since no one has been able to recreate that in a LONG time. The jump is still there and re-creatable.

comment:18 Changed 7 years ago by mnivet

We've detect this problem on our application and fix it by setting the min-height of the container of the sortable elements so that the size of the container didn't change when the DOM is modified to render the sortable ui effect

the code look like this :

// change the internal _mouseStart method to inject a min-height on our sotable container
var originalStart = sortableInst._mouseStart; 
sortableInst._mouseStart = function () { 
that._displayTable.css('min-height', that._displayTable.height()); 
originalStart.apply(sortableInst, arguments); 
};

[...]

// reset this min-height value when the Updated event is raised (when all DOM operations are done in the sortable widget)
_onSortUpdated: function () { 
this._displayTable.css('min-height', ""); 
},

This could be an idea on how to fix this problem, even if some other consideration should be take into account like keeping the original value of min-height to set back this value at the end instead of setting the value to an empty string like in this example.

Hope this help

Last edited 7 years ago by mnivet (previous) (diff)

comment:19 Changed 6 years ago by Victor Homyakov

I fixed "scroll jumping" in my project by remembering scroll position before helper becomes absolutely positioned (https://github.com/jquery/jquery-ui/blob/master/ui/sortable.js#L227) and restoring scroll position after placeholder is created and updated (https://github.com/jquery/jquery-ui/blob/master/ui/sortable.js#L247)

Test case with "brute-force" proof of concept: http://jsfiddle.net/CVPtJ/2/

If it is OK, I can incorporate those changes into _mouseStart and make a pull request.

comment:20 Changed 6 years ago by Scott González

Milestone: 2.0.01.8.21
Resolution: fixed
Status: openclosed

This has been fixed for a while, likely from 8e899dab6cd1fc410bbda0e7c88cdf1a1c8e9764.

Note: See TracTickets for help on using tickets.