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.
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.
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.
@adam, I noticed you commented on the only similar issue I found (the forum link I posted earlier). Any thoughts?
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
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.
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:
@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:
``
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.
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.
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: