Stuck on nav-view="leaving"

I’ve recently had some issues with view transitions getting stuck when navigating through the app by tapping around quickly. I end up with panes that have nav-view="leaving" stuck on them, with translate3D(-33%, 0px, 0px) and often times this view is overlapping the view that I want to be visible.

Has anyone come across this issue?
I saw this post: Please help test: Angular 1.3, improved transitions, cached views, etc but it didn’t lead me anywhere.

I’d love to post a link to codepen but I’m finding this issue hard to isolate and would have to post a clients entire project.

I’m using nightly build v1.0.0-beta.14-nightly-965 and it only seems to happen when tapping around the app very quickly. The only thing that I’m thinking ‘might’ have an impact is the fact that I don’t use the standard header bar and never use the history back functionality. Instead, I always route to the correct location explicitly (though I’m not sure why that would matter). Also all my views are nested in a base ion-nav-view.

Any suggestions are extremely appreciated. I’ve been looking at this issue for a few days now and running low on ideas.

1 Like

I’ve managed to recreate the issue in a minimal codepen based on the tabbed ionic demo (as my app also uses a nested ion-nav-view). http://codepen.io/onepm/pen/MYBpNj

You’ll notice in the screenshot below that there are 2 views leaving and 1 entering, and they stay this way regardless of time. This was done by tapping through relatively quickly on an iPhone. While its hard to see in the demo, the other side effect is that the views are actually obscuring each other as well.
image

@adam, I noticed you commented on the only similar issue I found (the forum link I posted earlier). Any thoughts?

+1 I’m experiencing this too. It is especially bad as I’m also deploying it as a web-app with a max-width view-container.

I’m suffering from this too. No resolution yet… anyone else found a solution already?

I am having the same issue, I don’t understand why it chooses 33% rather than 100%

Having the same issue. Please if anyone has any idea why this is happening.

I see this problem but its difficult to replicate.

I cannot replicate the problem on an iPhone 5 screen, but when installing an app and opening for the first time the problem can be replicated.

When you quit the app on the device and reload the problem disappears.

I meet this problem, and modify ionic.bundle.js in
// iOS Transitions section

run: function(step) {
if (direction == ‘forward’) {
//setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1); //before
setStyles(leavingEle,1, step * -100, -1); //after
can solve this problem. But I think this is not the best solution

1 Like

In my case the error was caused by my routing.

When my app is launched it automatically checks if the user is logged in by checking local storage. If logged in show tabs view, otherwise show login page.

After login, the user was directed to a “check setup” route, if setup was complete go to the tabs view.

When the user was logged i.e. skipping login/check setup the error couldn’t be seen, but it seems those extra 2 views before tabs caused the error.

I have now removed the “check setup” route and everything works fine.

Hope this helps you.

Thanks for your reply. We also have auto login in our app. I will check the routing.

I have a very similar and annoyingly intermittent error to this. In my app it is always nav-view="leaving"

see a semi-opaque white layer over the current view, covering 2/3 of the screen from the left. Inspecting the HTML element using USB debugging I see this:

<div class="pane" nav-view="entering" style="opacity: 0.9; transform: translate3d(-33%, 0px, 0px); -webkit-transition: 0ms; transition: 0ms;"></div>

This has persisted through several updates of ionic (now on 1.1.0) and also from iOS8 to iOS9

+1 , I have the same issue. My workaround is:

$ionicConfigProvider.views.transition("none");

I do still have this problem with an app that uses nested states.
To disable view transitions is not an option for me…

@lorenz I’ve made a quick dirty fix that doesnt require disabling transitions. It just makes back transitions slightly weird… Good enough until we find a proper solution. Here it is:
``

[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="entering"],
[nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="leaving"]{
  z-index:1;
}

[nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="entering"],
[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="leaving"]{
  z-index:1;
}

[nav-view-transition="ios"] [nav-view="entering"],
[nav-view-transition="ios"] [nav-view="leaving"]{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px;
}

I would still love resolution to this issue. It’s nothing clearly wrong with the code as in my case the issue disappears once livereload refreshes javascript. Seems like something wrong with Ionic/Angular.

2 Likes

I have a quick and dirty fix as well. My problem was nav-view=“entering” got stuck in some cases. So I added some simple logic to detect this on page enter, and hide it.

In app.js, in .run:

$rootScope.$on('$ionicView.beforeEnter', function () {
    var whiteOverlay = document.querySelector('div.pane[nav-view="entering"]');
    if (whiteOverlay) {
        whiteOverlay.setAttribute('nav-view', 'cache');
    }
});

This doesn’t fix the animation though. Just the white overlay stuck over the view on enter.

1 Like

Thank you so much! I’ve been struggling with this problem for awhile and this seems to have fixed it!

At least in my case it seems related to users inadvertently using the swipe back gesture, and I was able to fix it by applying can-swipe-back=“false” on the ion-view tag as indicated below:

<ion-view can-swipe-back="false">