Does not correctly handle `container-type: size` on a parent element

[Diggsey]

Expected behavior

When dragging a <Draggable> with an ancestor with container-type: size applied, the draggable should render at the correct location.

Actual behavior

The position and scroll offset of the containing ancestor is not taken into account, causing the rendered draggable to be in the wrong position. This happens because react-beautiful-dnd expects position: fixed elements to be positioned in window coordinates, but actually position: fixed elements are positioned relative to their nearest ancestor which is a container (has container-type: size or similar).

Steps to reproduce

Use react-beautiful-dnd inside an element with container-type: size, where the element is either not at the origin, or has a non-zero scroll offset.

Suggested solution?

Compute the position correctly.

What version of React are you using?

18.2.0

What version of react-beautiful-dnd are you running?

13.1.1

What browser are you using?

Firefox 111.0.1 (64-bit)

Demo

https://codesandbox.io/s/vertical-list-forked-b0z3m8

[PovilasKirna]

Having same issue, when trying to drag an element it appears far away from mouse position

[nahkar]

Also faced with this problem when add transform: scale on wrapper

[kiraahmad]

I'm having the same issue, any solution to this ?