CSS transform on dragged element is not preserved by the dragged item

[ericbiewener]

This appears to be a limitation of the HTML5 drag & drop API (Codepen indicating this), so feel free to close this issue if pragmatic doesn't offer a solution. Posting this in part just to have it discoverable by future devs.

One potential solution is of course to make a wrapping container draggable, rather than the transformed element itself. But this produces other visual issues, such as the clipping are on the dragged item including an opaque gray background, and potentially even some content outside the DOM of the dragged element (note the few pixels of purple on the left):

[EarlStrada]

I am also experiencing this issue and only on chrome.

[tarun111111]

Than use the shadow border usess to fix them

[alexreardon]

• unfortunately, there are some known bugs with native drag previews (elements with transforms being one of them). The issue with transforms seems to impact Safari the most, so one option is to use the transform on Chrome, and disable the transform in onGenerateDragPreview for Safari
• setCustomNativeDragPreview helps smooth over most issues if you haven't tried that

[michaelabrahamian]

Closing this, but feel free to re-raise if you have further questions 😄