Card not visible whilst dragging to a new list (on iOS Safari browser)

[SergeKrstic]

Expected behavior

When dragging a card from one list to another, the card should remain visible across all lists.

Actual behavior

When dragging a card to a new list, the card is not visible when positioned above the new list. The card get cropped as it leaves the boundaries of the original list.

Steps to reproduce

1. Open up the Safari browser on the iPhone
2. Navigate to app
3. Drag card to new list

Suggested solution?

The issue appears to only occur on iOS Safari browser when the CSS property overflow is set on the list container.

overflow-x: hidden;
overflow-y: auto;

The overflow property allows a large of cards to be scrolled. Disabling the overflow fixes the issue, such that the card reamains visible across the entire drag path, however the large list of cards cannot be scrolled. A possible solution would be configure the CSS properties to use position:absolute as suggsted by this article

What version of React are you using?

^16.12.0

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

^12.2.0

What browser are you using?

iOS Safari

Demo

[Lars-Nijboer]

This happens with the clone functionality off right?

[alexreardon]

If you are getting layering issues we recommend you reparent your Draggable to another location in the DOM

Let me know if you still have any problems

[SergeKrstic]

Excellent, reparenting the draggable card using the clone functionality fixes this issue. Thanks, @alexreardon and @ForteDell