jQuery UI Draggable pushed upwards on mousedown in IE11

[Jonas Geiregat]

I have this Jquery UI Draggable that can partially be dragged outside the viewport. The handle of the draggable remains in the viewport. When a user drags it to the bottom then x pixels of the draggable are outside the viewport. If the user then clicks it, its parents scrollTop gets set to x making it look as if the draggable jumps up. I don't understand how this is possible because the parent its overflow is set to hidden.

The issue is triggered not on the click event but on the mousedown event of the draggable.

Note that I can only reproduce this issue on IE11. Also, you have to drag the handle down until your cursors crosses the black border. Otherwise it immediately jumps back.

I encountered the issue using version 1.11.4 but i'm able to reproduce with 1.12.1 which is the version used in the fiddle below.

​https://jsfiddle.net/yzfvckbe/2/

The issue has been addressed on stackoverflow but nobody seems to have a clue.

​https://stackoverflow.com/questions/41021328/jquery-ui-draggable-pushed-upwards-on-mousedown-in-ie11

[atrosper]

I'm having a similar issue with IE11. It definitely has something to do with the MouseUp handler when the cursor is over the drag handle. It seems like if any part of your draggable object is off the bottom/right side of the screen when you trigger a mouse up on the drag handle, it will snap the object back into the frame.

I'm having an even stranger situation with mine, where I have a "content" div (parent), and a "stage" div (grandparent). When you drag outside as described above, and you mouse up outside the container (leaving some of the drag handle in the container), when you click the drag handle, it ends up shifting the entire content div up-left, and shows the background of the stage div, as if you had scrolled, but both of these divs are set to overflow: hidden.