search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.41k stars 3.69k forks source link

[bug] Odd behavior with developer console open #2260

Closed evaneykelen closed 1 year ago

evaneykelen commented 1 year ago

Sorting behaves erratically with elements flying vertically when Chrome's developer console is open.

Demo: https://share.cleanshot.com/2N9kNdBr8cV2d7Sl2Q8C

Steps to reproduce the behavior:

  1. Go to '...'
  2. Open Chrome developer console
  3. Drag and drop rows
  4. Witness odd behavior

Version: 1.15

zLinz commented 1 year ago

Same here, and only when the developer console's dock side is "dock to bottom" and on Mac chrome. Is it a chrome's bug?

image
evaneykelen commented 1 year ago

I suspect it has something to do in Sortable with calculating the window's view height which would explain why it happens only when the console is docked at the bottom as @zLinz points out.

btleffler-swarm commented 1 year ago

I also see this happening in Opera 97.0.4719.28 (x86_64) I don't see this behavior in Firefox or Safari.

btleffler-swarm commented 1 year ago

This seems to be a bug in Chrome and Opera related to native drag and drop functionality. You can observe the same behavior in the examples that are part of this article which don't appear to be using sortablejs. I suppose the workaround for now would be to set the forceFallback flag to true so that it doesn't use native drag and drop, or to just deal with it since it appears to just be a visual glitch that only occurs when the dev tools are docked to the bottom of the browser window.

evaneykelen commented 1 year ago

It looks like this is not an issue then with SortableJS, thanks @btleffler-swarm. Closing the issue!