Drag to dismiss item popups on mobile is inconsistent

[bhollis]

I'm not sure how much this is related to the recent changes to how we prevent scroll chaining, if at all, but I can frequently get into a situation where I can't drag down on the body of the popup to dismiss it. The sheet starts dragging a bit, then cancels. I wonder if the press tips are interfering with it, or if we're missing a pointer capture during the drag.

[robojumper]

I don't think this is recent - it's never really worked for the armory sheet either. The changes to scroll chaining at the very least allow dismissing sheets if they don't have a scroll bar.

[bhollis]

I swear it worked perfectly at one point, but that was maybe before the rewrite to use Framer Motion.

[bhollis]

OK, to summarize some research I did over the weekend:

1. This is not caused by Framer Motion.
2. This is not caused by PressTip event handling.
3. This is not caused by our scroll chaining fix.

What's happening as far as I can tell is that the drag begins as expected, but then after dragging for a short distance, Safari fires pointercancel and interrupts the drag. I believe it's because it thinks we're scrolling, even though there's no scroll possible in that direction.

This only happens when the area being dragged is scrollable. Removing scrolling with overflow: hidden or touch-action: none prevents this bug, but applying those styles after the initial pointerdown event does not work to prevent the subsequent pointercancel. Capturing the pointer does not help either - we get a pointercapturelost event.

One idea I haven't tried yet is to not move the sheet until your finger has moved some set amount, then apply touch-action: none or something, then start the drag and translate the sheet.

I'll keep plugging away at this occasionally because I really want this interaction to be smooth like it can be in native apps that have full control over gesture recognition. But I'd also love help on this as I'm running out of ideas for a workaround.