search

hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.38k stars 92 forks source link

Vertical drag with Safari 15 on iOS is cancelled when the address bar grow #240

Open 100terres opened 2 years ago

100terres commented 2 years ago

Issue originally opened on react-beautiful-dnd repository: https://github.com/atlassian/react-beautiful-dnd/issues/2367

In iOS 15 Safari shows/hides address bar at appropriate scroll position, and every show/hide will fire resize event. The library cancels dragging on resize event, so automatic scrolling causes cancellation.

Expected behavior

Does not cancel dragging on scroll.

Actual behavior

Does cancel dragging on scroll toward top edge.

Steps to reproduce

  1. Open below "vertical list" example in Safari landscape mode.
  2. https://codesandbox.io/s/k260nyxq9v
  3. Scroll toward bottom edge, you'll find address bar is shrunk.
  4. Drag item toward top edge
  5. At some point of scrolling, Safari shows address bar.
  6. Dragging is cancelled.

Suggested solution?

Remove resize event listener, or make it optional.

robotic-forest commented 2 years ago

@100terres any progress on this issue? Its currently making my app pretty janky for my users. Hope its receiving active attention here - I switched over from the main repo to this fork for that exact reason. Let me know if there's anything I can do to help :)

100terres commented 2 years ago

Hi @robotic-forest :wave:

Currently my proirity is to support react v18, but I'll go back to this issue as soon as possible :slightly_smiling_face: