Skip to main content

Search and Top Navigation

#4074 closed bug (fixed)

Opened February 06, 2009 03:01PM UTC

Closed January 14, 2015 03:55PM UTC

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.

Attachments (0)
Change History (20)

Changed February 06, 2009 03:26PM UTC by sutt comment:1

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

Changed February 07, 2009 01:40AM UTC by rdworth comment:2

component: ui.coreui.sortable

Changed February 07, 2009 01:40AM UTC by rdworth comment:3

milestone: TBD1.6

Changed February 09, 2009 06:09PM UTC by sutt comment:4

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.

Changed March 08, 2009 02:30PM UTC by rdworth comment:5

milestone: 1.71.8

Changed March 16, 2009 04:57PM UTC by sutt comment:6

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

Changed March 17, 2009 11:43AM UTC by sutt comment:7

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

Changed June 27, 2009 09:57PM UTC by benjaminfield comment:8

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();

Changed March 24, 2010 04:19PM UTC by kschaller comment:9

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.

Changed September 10, 2010 09:55PM UTC by Digitalxero comment:10

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.

Changed January 28, 2011 03:31PM UTC by samhamilton comment:11

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.

Changed November 18, 2011 08:59PM UTC by travisp comment:12

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.

Changed October 11, 2012 02:54PM UTC by scottgonzalez comment:13

milestone: 1.9.02.0.0

Changed October 25, 2012 12:43AM UTC by petersendidit comment:14

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.

Changed February 25, 2013 03:07AM UTC by tj.vantoll comment:15

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.

Changed May 17, 2013 02:44AM UTC by tj.vantoll comment:16

#9309 is a duplicate of this ticket.

Changed May 17, 2013 02:46AM UTC by tj.vantoll comment:17

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.

Changed September 19, 2013 02:04PM UTC by mnivet comment:18

_comment0: 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 help1379599565768182

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

Changed March 10, 2014 10:00AM UTC by victor-homyakov comment:19

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.

Changed January 14, 2015 03:55PM UTC by scottgonzalez comment:20

milestone: 2.0.01.8.21
resolution: → fixed
status: openclosed

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