search

maisano / react-router-transition

painless transitions built for react-router, powered by react-motion
http://maisano.github.io/react-router-transition/
MIT License
2.59k stars 138 forks source link

Any way to correctly handle iOS safari back/forward swipes? #43

Closed zsaraf closed 7 years ago

zsaraf commented 7 years ago

Great library, it has been working perfectly! I do have one exception though that might actually make this library unusable in my case though.

The only case that is not working for me is when the user uses the built-in iOS back and forward swipe gestures on safari. This swipe looks like this: https://cl.ly/1g1H44452V3l

When this transition happens in my react app, the from page is given the atEnter styles although it is already out of the screen (as we have landed on the previous page from the iOS swipe gesture).

Have any users of this library (or react-router as a whole) had trouble with this? And has anyone found a fix?

Thanks!

maisano commented 7 years ago

hi @zsaraf!

i'm not sure i follow–is the problem that the atEnter styles are incorrectly applied or that your app doesn't persist the state from the previous location?

zsaraf commented 7 years ago

Thanks for getting back so fast @maisano.

The problem is that during the iOS safari back swipe, you can see the previous page that we are popping to (this is probably a screenshot, I'm not entirely sure). Then, on arrival to that page, react-router senses a POP and we therefore initiate the animation transition.

This is much more a problem with Safari iOS then it is with this library, I was mostly wondering if anyone using this library has seen this problem before and has some idea of a possible fix. The biggest help here would be a way to sense the iOS safari back swipe and not use the animation in this case.

maisano commented 7 years ago

@zsaraf–i see! unfortunately i don't know of a clean or easy way to detect a mobile swipe. you could try to detect when the next location matches that two before it on a POP but that would require maintaining your own history stack which would surely raise a handful of other issues.

i just checked out the react router website (https://reacttraining.com/react-router/web) on mobile safari to see how they handle it. turns out they don't, and they have an extraneous animation as well.

maisano commented 7 years ago

@zsaraf going to close this for now–feel free to update with any findings!