Spurious dragleave event on sudden mouse movements
Reported by
fehe...@gmail.com,
Apr 26 2017
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36 Steps to reproduce the problem: This only happens on Linux 1. Go to https://www.html5rocks.com/en/tutorials/dnd/basics/ 2. Scroll to the example under "The DataTransfer object", the A, B, C boxes over "Dragging properties" 3. Keep dragging the rightmost box (C) over the middle one (B). (If/when they swap, put back them to their original place and continue.) 4. When carrying out 3., try to make sudden mouse movements: 4.1. Left-click on (C) and hold the mouse button down 4.2. Quickly move the cursor over (B) 4.3. Keep it still for a short period (perhaps move backwards a little, I am not sure of the exact trigger). 4.4. Release the mouse button to complete drag and drop What is the expected behavior? 1. At 4.4 the box (C) should always be swapped with (B). 2. Starting from 4.2, the middle box should have a dashed border, indicating that drag and drop is active. What went wrong? 1. Sometimes the dragging is not successful at 4.4. 2. The dashed border sometimes disappears at 4.3. (If I move the mouse a little after 4.3 then the dashed border appears again.) Did this work before? N/A Does this work in other browsers? Yes Chrome version: 58.0.3029.81 Channel: stable OS Version: Ubuntu 16.04.2 (4.4.0-72-generic) Flash Version: I can make a more reduced test case or a video of nobody can reproduce this. - I've seen this issue on several (similar) Linux desktops with Chrome 57 and 58. - Windows Chrome and Edge and Firefox (Linux) seems to be unaffected. - Not only html5rocks.com is affected, but also the very simple drag and drop implementation in the web application we are developing, that's where we found the problem. - The problem happens around 80% of the time if I intentionally try to make sudden movements as described above. It happens 10% of the time if I just "idly" keep drag and dropping. To investigate further, I attached event listeners to the box (B) using the Developer Console. ($0 is box (B), the target of the drops) ``` $0.addEventListener('dragenter', function() { console.log('dragenter'); }); $0.addEventListener('dragover', function() { console.log('dragover'); }); $0.addEventListener('drop', function() { console.log('drop'); }); $0.addEventListener('dragleave', function() { console.log('dragleave'); }); ``` With this, a successful drag and drop looks like this: ``` dragenter (31 times) dragover drop ``` And a broken one looks like this: ``` dragenter (6 times) dragover dragleave ``` In the broken case, if I move the mouse a little instead of releasing the left button, then there is a `dragenter` again, and starting from that it works normally and I cannot break it with any sudden movements.
,
Apr 27 2017
Unable to reproduce the issue on Ubuntu 14.04 using latest chrome stable #58.0.3029.81 and latest dev #59.0.3071.25. Attached a screen cast for reference. Following are the steps followed to reproduce the issue. ------------ 1. Navigated to https://www.html5rocks.com/en/tutorials/dnd/basics/ 2. Scrolled to the example under "The DataTransfer object", the A, B, C boxes over "Dragging properties" 3. Kept dragging the rightmost box (C) over the middle one (B). 4. When carrying out 3., tried making sudden mouse movements. feherga@ - Could you please check this issue in latest dev #59.0.3071.25 by creating a new profile without any apps and extensions and please let us know if the issue still persist or not. Thanks...!!
,
Apr 27 2017
Here is a screencast of the reproduction on a clean Chrome 59.0.3071.25. I think I couldn't repro on 54.0.2840.100, but I cannot verify that because I already upgraded it. Perhaps it's not the suddenness of movement what matters but the stop after a short movement. In the video, you can see the problem at 0:47, 0:52, 0:57, 1:38 and 1:44. At 1:38 and 1:44 I have added event listeners to print to the console. At 1:44 I move the mouse a little after "dragleave" and then a "dragenter" happens. (By the way, what tool did you use for the screencast?)
,
Apr 27 2017
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 27 2017
,
May 1 2017
Thanks for the clear repro steps and the video! I'm unable to repro in 58 stable on ubuntu linux. I wonder what other variables are involved here... it doesn't sound like flaky hardware (e.g. generating a spurious mouse-up) as you wouldn't get mouseenter again. Can you try adding mouse move event listeners, to help narrow down the problem? (i.e. if we there are no unexpected mouse events the problem is specific to drag/drop, vs. higher up in the stack....) I'll try a tip-of-tree build too.
,
May 1 2017
,
May 3 2017
,
May 3 2017
I tried this on a few different machines, all with Ubuntu Linux:
- I could reproduce the issue: CPU is Core i7 in all cases, GPU is NVidia or Intel on-chip
- I could not repro the issue: CPU is AMD, GPU is NVidia (Chrome was v57 in this case, but I've seen it fail in other setups)
Disabling SMP using the `nosmp` Kernel parameter doesn't fix it in case of i7.
I also tried checking whether any other event listeners are firing:
```
function myListener(event) {
console.log(event.type, event.target);
}
for (var key in $0) {
if (key.search('on') === 0) {
$0.addEventListener(key.slice(2), function(event) { myListener(event); });
}
}
```
This code also triggers on mouse events. I've seen no non-drag events around the anomalous behavior:
```
drag <div class="column moving" draggable="true" style="opacity: 0.4;">…</div>
dragover <div class="column" draggable="true"><header>B</header></div>
drag <div class="column" draggable="true" style="opacity: 1;"><header>C</header></div>
dragover <div class="column" draggable="true"><header>B</header></div>
drag <div class="column" draggable="true" style="opacity: 1;"><header>C</header></div>
dragleave <div class="column" draggable="true"><header>B</header></div>
drag <div class="column" draggable="true" style="opacity: 1;"><header>C</header></div>
dragenter <div class="column" draggable="true"><header>B</header></div>
dragover <div class="column over" draggable="true">…</div>
drag <div class="column moving" draggable="true" style="opacity: 0.4;">…</div>
dragover <div class="column over" draggable="true">…</div>
drag <div class="column moving" draggable="true" style="opacity: 0.4;">…</div>
dragover <div class="column over" draggable="true">…</div>
```
I kept the mouse still for a few seconds after `dragleave` and no events were fired. The `drag` and the `dragleave` only happened after I moved the mouse a little. (Chrome version used for this was 60.0.3080.5 dev channel.)
,
May 9 2017
Not sure I can reproduce it exactly, but there definitely seems to be some weirdness going on. I can reproduce the spurious dragleave event, but I'm still getting dragover and drop events afterwards, so while the dashed border disappears the drag/drop does complete successfully. (i.e. the events I'm getting are in order: dragenter, dragleave, x*dragover, drop)
,
May 10 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 14 2018
|
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by ligim...@chromium.org
, Apr 26 2017