I've been going somewhat crazy trying to debug a file drag and drop issue in an application I'm working on. What's happening is that Chrome is firing onDragEnter, OnDragOver and onDrop events (the only events I'm using) outside the element on which they're defined but only when devtools is open. I can't share my code but I can reproduce the issue easily using this bare bones example on JSBin: https://jsbin.com/hiqasek/edit?html,js,output
With devtools open, if I drag a file from Finder up toward the target div the onDragEnter event happens when the cursor is about 75 or 100 pixels below the div. If I go ahead and drop the file there the onDrop event fires. The end result is as expected but from the wrong cursor position. Now if I close devtools and do this again, the events fire "pixel perfect" inside the div.
Running in incognito mode with extensions disabled yields the same result.
My setup: MacOS 10.15.7 with Chrome 95.0.4638.69. This did not happen when testing with Edge 95.0.1020.40 and Safari 15 v15612.1.29.41.4. EDIT: Does not happen in the same version of Chrome on Windows 10 20H2 (19042.1288)
Am I overlooking something (very possible), or is this is a bug in Chrome?