Painfully Slow Transitions On Android 4.4

I am having the same problem. In iOS is super fast, like a native app. But, in Android is reeeeally slow. I was using the last beta but now I downgrade to the beta 10 and is much faster. Still have to try set hardwareAccelerated="false"

Adding more to this. I’m experiencing the same problem on an iPod Touch (5th Generation). I’ve put timers into the app state change events. The code execution from stateChangeStart to stateChangeSuccess is fairly speed (< 500ms) or the iPod Touch and very fast on an iPhone 5S. However, the actual transition on the device takes 1 to 2 seconds on the iPod Touch but is nearly instantaneous on an iPhone 5S.

There is a definite gap between when the state change event is finished and when the view actually performs the transition.

A few days ago, I was working with another developer experiencing the same problem on an Galaxy S4.

UPDATE : On the iPhone 5S, the transitions are FAST, but there is a nasty black flash between each transition.

Strange thing is that the time gap between events emitted by ui-router, which are $stateChangeStart and $stateChangeSuccess, is only 40 ms while the whole switch from one state to another takes 5 seconds (on a mobile phone) for the view that I test! Why is that?

Those services does not wait for dom-content :wink: -> get noticed that state/url/urlparams are changing does not take time. But the Browser needs to render the dom and angular has to finish all the new $digest for watcher, repeaters, scope variables and sooo on.

Greets, bengtler.

I supposed that, but needed a confirmation. Thanks. But how can I do something on page load then? The router provider events available in the routes definition that are onEnter and onExit fires in the same time.

BTW. I’ve done a tabbed interface that uses the simple ng-show/ng-hide and switching states with this method is ten times faster… Isn’t there a persistent mode for the states or a way to cache this states navigation without rebuilding the DOM?

That is what ionic is developing already behind the scenes… so be patient ;).

I know and understand that some time is required for doing this, but I’ve also got my own schedules and my patience is almost over. So I’m looking around for another solution. Do you think that angular template cache could help to build a directive and handle this issue somehow and still utilize the ui-router advantages?

Same issue here, just updated to beta.13 and running on Android Lollipop. Scrolling and side navigation transitions are fine, view transition is super slow :frowning:

The problem is Angular has this policy of destroying a view once you leave it, and recreate it each time you need it. I remember I did some research on how to keep them “alive” somehow but it seems like there was nothing out there to use.

Storing the result of asynchronous calls in a service helps to avoid useless calls by caching data locally, and that data will be used to fill up a HTML template.

templateCache simply caches a template, to avoid requesting it (asynchronously) every time you need it. After the first time you request it, it’s cached. You can also “inject” a template manually so it’s available straight away, but in a situation like a mobile app built with Ionic you work with local files, including HTML templates, so I don’t see any advantage in using templateCache to solve the view transition issue. How were you thinking of using it?

Digging into the source code, I’m looking at the ionNavView directive.

There is a listener for the $stateChangeSuccess event

$scope.$on('$stateChangeSuccess', eventHook);

that in turn calls the updateView function, where basically it destroys the old view and creates the new one.

I couldn’t spot any weird/expensive piece of code here, so I guess the issue is somewhere else.

Hi, any news on this topic? I’m having the same issue going back from a detail to the list using beta 14.

I’m still having this issue, the transitions are too slow on Android only.