iOS 7+ swipe back gesture conflict with stateChange animations

Question

In short when moving from one state to another in an AngularJS application I use CSS animations to animate the view change. For example applying a fade or transform via the .ng-enter and .ng-leave classes.

But in iOS 7+ you can transition from one page to another by swiping your finger off the screen edge left or right and it does a back or forward action the same as clicking the back and forward buttons on the toolbar. However because the OS does its own animation back to the previous page in the history stack, and then AngularJS fires the state change after and then does the CSS animation, you get double animations and a flicker as the content you can already see is then animated back into view... How can we prevent this? As it's a really crappy looking user experience and looks like a bug to end users.

I thought about detecting iOS 7+ then disabling the animations. But I'd only want to disable the animations when doing the slide off the edge with the finger and not for actual clicks or the browser buttons. As far as I can tell there is no way to detect this. But the UX really suffers.

Has anyone had this issue before? Worked around it?

Answer 1

i think you will need to figure out where the swipe started from when a navigation event was triggered. might be as simple as detecting if there's a touch on the page when the event triggers - it implies the user is touching it at that very moment.. in that case, disable the css animation. in theory that's it but i never attempted nothing even close. :)