Draggable items are positioned incorrectly when parent of Droppable has `transform`

[72403]

Expected behavior

If I place a Droppable and Draggables in a div and add a transform to that div (e.g. transform="translateX(0%) translateY(0px) translateZ(0px)"), Draggables should follow my mouse as I drag them.

Actual behavior

Items being dragged positioned way to the right. I originally thought they were disappearing when dragging, but if I drag my cursor way to the left they'll appear on the right side of the screen.

Steps to reproduce

1. https://codesandbox.io/s/reverent-lucy-eibotf
2. Drag an item around and it will disappear/be placed way to the right.

Suggested solution?

Not sure.

What version of React are you using?

18.2.0

What version of @hello-pangea/dnd are you running?

16.2.0

What browser are you using?

The issue appears in Firefox and Safari. I haven't tested Chrome.

Demo

https://codesandbox.io/s/reverent-lucy-eibotf

[coolneo4u]

I have the same issue.
When it's inside Modal (I'm using Mantine Modal), it's not positioned properly when it is dragging.

[Codrin Socol]

@coolneo4u @72403 Had the same issue. Went through the docs and found this:

Warning: position: fixed

@hello-pangea/dnd uses position: fixed to position the dragging element. This is quite robust and allows for you to have position: relative | absolute | fixed parents. However, unfortunately position:fixed is impacted by transform (such as transform: rotate(10deg);). This means that if you have a transform: * on one of the parents of a <Draggable /> then the positioning logic will be incorrect while dragging. Lame! For most consumers this will not be an issue.
To get around this you can reparent your <Draggable />. We do not enable this functionality by default as it has performance problems.

This fixed the issue for me.