Motion: [BUG] onPan event doesn't work properly on touch input.

[feyyazay]

chromium based browsers seems to be the issue

Example code:
https://codesandbox.io/s/framer-motion-sidebar-hv9ln

Tested on:

Doesn't work properly:
  - Chrome on android
  - Chrome on windows with device emulator 
  - Opera on windows with device emulator

Works as expected:
  - Chrome on ios13
  - Safari on ios13
  - Firefox with device emulator

[aholachek]

I was able to get this working properly after adding touch-action: none on the listening element, which seems to be mandatory for getting pointerup events to fire reliably-- here's a quote from that link:

By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures.

[feyyazay]

I was able to get this working properly after adding touch-action: none on the listening element, which seems to be mandatory for getting pointerup events to fire reliably-- here's a quote from that link:

By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures.

That works great. Thanks.

[mattgperry]

Just re-opening this as I think it'd be good to apply this style automatically to pannable elements.

[dminkovsky]

seems necessary for correct tap behavior too (c.f. #310)

[mattgperry]

I'm closing this as I've currently got a PR in for doing this when a component is drag-enabled but in doing so I think automatically applying touch-actions to elements with pan and other listeners could be too opinionated. With drag we have three options that map well to touch-actions whereas we don't have that here.

[bhollis]

@mattgperry I'd love it if you'd reconsider, or add a warning or something to docs. I found that onPan didn't work on Chromium touch devices/emulation (it would fire onPanEnd quickly after onPan) until I set touch-action: none on the element.

[miketheo423]

I would advise against using touch-action: none for a fix. It prevent's scrolling on the y-axis when touching the target component. I developed a carousel component using this method and was stuck wondering why I couldn't scroll down anymore and it was because of the touch action property.

[andiechu]

Like @miketheo423 said, the workaround solution prevents scrolling up & down. The bug makes it harder to develop a more complex customized animation. I would hope you can reconsider it.