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

Why does touch on mobile Safari cause animation to pause/slow down? #75

Open richpixel opened 6 years ago

richpixel commented 6 years ago

I've setup 2 animated routes like so:

        <AnimatedRoute
          path="(/|^.+?index.html)" exact
          component={MainScreen}
          atEnter={{ offset: -100 }}
          atLeave={{ offset: -100 }}
          atActive={{ offset: 0 }}
          className="switch-wrapper"
          mapStyles={mapStyles}
        />
        <AnimatedRoute
          path="/results"
          component={ResultsScreen}
          atEnter={{ offset: 100 }}
          atLeave={{ offset: 100 }}
          atActive={{ offset: 0 }}
          className="switch-wrapper"
          mapStyles={mapStyles}
        />

These work perfectly until running on iOS/Safari... I'm triggering the animation with a swipe left. However, if I keep my finger down after the animation has started running, for some reason it pauses and then appears tied to the motion of my finger. This actually would be a nice effect, however after I let go the animation completes with a 'jittery' finish. I was able to disable this effect by adding:

onTouchStart={e => e.preventDefault()}

to the div that accepts the swipe gesture. However I'm wondering if this feature is documented anywhere or is preventable? Or is this a feature of React Motion?