1428851 - Drag & drop freezes under certain conditions (dragstart event is fired but not dragend)

Status: RESOLVED DUPLICATE of bug 1338748

(Core :: Widget: Cocoa, defect, P2)

Description

[wesm87]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

We have a React application that uses the Drag and Drop API and we recently noticed that the drag part of the interaction would freeze under certain conditions. In our application the condition is you need to move the element that's being dragged a very small amount and then release it, and then any further drag interactions will trigger a dragstart event but not a dragend, and the element essentially becomes "stuck". When an element is in this stuck state, the image of the element that follows the mouse around is not shown.

I wanted to see if this was an issue with React or Firefox, so I first created a CodePen demo using React and I was able to replicate the issue, though is manifests slightly differently in my demo (you just have to keep dragging an item and dropping it anywhere and eventually the bug occurs). I then created another CodePen demo using vanilla JS and was also able to replicate the issue there. We haven't seen this issue in any other browser (and I wasn't able to trigger the bug in my CodePen demos using any other browser) so I'm fairly confident this is a Firefox-specific issue. We believe this started after the new Quantum update but I haven't actually tried using an older version to see if the bug was present before.

You can find the CodePen demos at the following URLs:

https://codepen.io/wesm87/pen/jYaEdB
https://codepen.io/wesm87/pen/xpPZEP


Actual results:

I have a list of li elements inside a ul; when dragging any of the items repeatedly, the drag interaction in the browser eventually breaks, making it impossible to drag any of the items. Oddly enough, I've found that if I have both my demos open at the same time in different tabs, and I get one of the tabs into this "stuck" state, and then go over to the other tab and drag an item there, if un-sticks the first tab and I'm able to drag the items again.


Expected results:

The element should remain draggable.

Comment 1

[wesm87]

I should note that we've only tested this on macOS so I can't confirm if the same bug is present in the Windows or Linux versions of Firefox.

Comment 2

[ovidiu boca[:Ovidiu]]

Hi wesm87,

I tested this on Mac OS X 10.12 with FF Nightly 59.0a1(2018-01-09) and I can't reproduce this issue. 
Can you please download FF Nightly version from here: https://www.mozilla.org/en-US/firefox/channel/desktop/# and retest this issue, also if it's possible please create a video recorder for a better understanding. Thanks

Comment 3

[cyrill.halter]

Hello all,

I'm dealing with the same problems. I've found that the issues seem to appear when some intense computation is performed within the event callback, possibly including the registration of more callbacks. I've managed to reproduce this in FF DeveloperEdition 58.0b16 (64-bit) and FF Nightly 59.0a1 (2018-01-15) (64-bit) on macOS Version 10.12.6. Safari and Chrome on the same system seem to work fine. As far as I know, the issue does not manifest itself on Windows.

The following are a minimal example that I used to test...

https://www.dropbox.com/s/2niosp1xsu3rghh/dnd-bug.html?dl=0

...and a video recording showing where the problem appears...

https://www.dropbox.com/s/e24ey6dj6ohy379/dnd-bug.mov?dl=0

The video recording also shows some further interesting behavior: Once the dragend events stop firing, switching to a different tab and dragging an arbitrary element a few times helps the site recover. After this, new dragend events are fired as expected.

Thanks in advance for your help!

Comment 4

[wesm87]

So using the latest build of Firefox Developer Edition (58.0b16) I did not see the issue in my Codepen demos, but I was able to capture a video demonstrating the issue that we originally had in our application:

https://www.dropbox.com/s/tn1iat7rev6vpwt/firefox-drag-and-drop-bug-demo.mp4?dl=0

Comment 5

[wesm87]

Note that the beginning of the video shows a slightly different issue where the drag-and-drop is inconsistent; then I enabled a feature in our application that is a bit CPU-intensive, which caused the full-on failure that I originally reported.

Comment 6

[Stephen A Pohl [:spohl]]

This sounds very similar to bug 1338748.

Comment 7

[Stephen A Pohl [:spohl]]

Closing this as duplicate of bug 1338748, which has just been closed as worksforme. Please reopen bug 1338748 and provide new steps if this continues to be reproducible.