Search code examples
javascriptcssjquery-uijquery-ui-draggablejquery-ui-droppable

jquery ui drag/drop element chopped off when dragging over droppables, only if draggable container has an overflow


I have a really weird issue when dragging an item from the Unschedule Games bucket into a grid, as you can see the draggable item gets cut off and happens about 80% of the time while dragging over that area.

This ony happens when the items in the Unscheduled Games overflows, scroll bar. Otherwise no cutoff on drag. The drag and drop works find between games in the grid just fine also.

This only happens in Chrome. Firefox and Edge work fine. I really dont know what JS or CSS to show since it can be anything.

Also when I pause it like the screen below and inspect the HTML, if I mess with the CSS, like turn "top" off then on, it pops normally with no cut off. It seems there is a hidden container above it since I can drag horizontally in a straight line.

I am using JQuery UI 1.9.2.

My main question is, can this be a bug in Chrome? Could I install an older version of Chrome, and if so where can I find the installs?

enter image description here


Solution

  • I went back to an older version of Chrome and turns out to be a bug in the version 70.0.3538.77. 69.0.3497.92 works fine and image is below of correct behavior.

    enter image description here