Weird Transform Behavior on the Sortable Items When Parent/Ancestor Divs have Animations with Transform

[H4JUN]

Kooha-2024-05-22-10-15-09.mp4

Link to codesandbox

Steps to reproduce:

1. Open the sliding div using "Click Me" button.
2. Click on one of the "X" buttons to remove the sortable item from list
3. The clicked item and the items following it will shift from right to left.
   This behavior happens only during the first removal of the items. Subsequent clicks of the "X" button shows expected behavior.

Upon logging the transform value obtained from useSortable hook in the SortableListItem, I get an Object with the x property set to a value (199.23332214, the value changes everytime) when it should be set to zero.

As a temporary workaround, I have manually set transform.x to be 0, given that my sortable list is a vertical list. However, if anyone comes up with a horizontal sortable list when its parent/ancestor has an animation that transforms on the x-axis, or a vertical list with animation on y-axis, then I think it cannot be bypassed that easily.

Am I missing something from the documentation or did I do anything wrong in my code? Or is this an issue that needs to be addressed?

[silviapio]

I have the exact same problem when the list is in a dialog that can be moved around. So basically transform gets the x and y values from the previous origin, so first interaction will have those x and y, and the next one(s) will be correct. For me setting transform.x doesn't work fully as I can also move the dialog vertically so the items would move a bit more or less vertically... I am wondering if there is some other way of fixing this weird behavior?

[Arkellys]

I think it's the same issue as #615

[silviapio]

in my case, I tried with the solution of #615 but it did not help. What we did since ours was a vertical list, was to set transform.x to 0 and transform.y to the height of the element.