react-toastify icon indicating copy to clipboard operation
react-toastify copied to clipboard

Swiping to dismiss on iOS Safari clashes with native browser gestures

Open benhodgson87 opened this issue 6 years ago • 1 comments

Do you want to request a feature or report a bug? Bug

What is the current behavior? When swiping to dismiss a toast, in iOS Safari, the native browser swipe behaviour occurs alongside the swipe. This means when swiping to dismiss a toast, the whole page scrolls sideways.

In some cases this means it's possible for a user to accidentally swipe back to the previous page when attempting to dismiss a toast.

ezgif com-optimize

What is the expected behavior? Default browser gesture behaviour should be prevented when swipe occurs over an active toast.

Apple's guidelines suggest preventDefault should be sufficient to achieve this; https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW24

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Tested on iPhone XS on iOS 13.1.3, using react-toastify example site

benhodgson87 avatar Oct 24 '19 08:10 benhodgson87

Hello @benhodgson87 ,

Thank you for reporting the issue. Would you like to open a PR for that ? BTW, thank you also for sharing the apple guidelines regarding the issue.

fkhadra avatar Oct 24 '19 09:10 fkhadra