Ionic app back button causes previous state screens to overlap

问题

I am working on an ionic project and am encountering a strange bug where pressing the back button causes the last two views to display at the same time. I've been attempting to fix this for a few weeks now with no luck so I'm hoping one of you have encountered this and can help!

The app defaults to the state "Initialize" which just checks if the user is logged in already or not. If they are already logged in it throws them to the "Home" state. If they are not logged in it puts them at the "Landing" state.

The "Landing" state has a login modal that pops up where you type your e-mail and password. After logging in successfully it puts you back to the "Initialize" state which then directs you to the "Home" state because you're logged in now.

The problem is arising when you do the following: Initialize -> Landing -> Initialize -> Home (Tabs Screen) -> 2 screens deep on any given tab, then press the back button It will then show the last two views each occupying the screen with one occupying the whole screen and the other occupying 50% of the view and transparent.

So an example would be: Initialize -> Landing -> Initialize -> Home -> User Profile -> Message User -> Back button Now I will see User Profile & Home screen both up at the same time with User Profile taking up the full screen while Home screen takes up 50% of the view and is transparent.

This problem does NOT happen if the user was already logged in, therefore skipping the Landing page and going directly to the Home Tabs view.

////////////////// Update: I also have an ion-side-menu inside tabs.html with the tab views inside the ion-side-menu-content.. I discovered that if i remove the side menu, the problem goes away... ///////////////////

My suspicion is that it has to do with me setting up the states incorrectly?

I have confirmed the problem on both web browser & ios 9 & 10

  $stateProvider.state('initialize', {
url: '/initialize',
templateUrl: 'templates/loading.html',
controller: 'initCtrl'
})
.state('landing', {
  url: '/landing',
  templateUrl: 'templates/landing.html',
  controller: 'landingCtrl'
})
.state('tab', {
url: '/tab',
templateUrl: 'templates/tabs.html',
controller: 'tabCtrl'
})
.state('tab.home', {
  url: '/home',
  views: {
    'home': {
      templateUrl: 'templates/fitSpot_home.html',
      controller: 'FitSpotHomeCtrl'
    }
  }
})
.state('tab.fitSpot_groupClasses', {
  url: '/home/groupClasses',
  views: {
    'home': {
      templateUrl:  'templates/fitSpot_groupClasses.html',
      controller: 'FitSpotGroupClassesCtrl'
    }
  }
})
.state('tab.groupClasses_detail', {
  url: '/home/groupClasses/groupClass_detail/:session_id',
  views: {
    'home': {
      templateUrl:  'templates/fitSpot_groupClasses_detail.html',
      controller: 'FitSpotGroupClassesDetailCtrl'
    }
  }
})

回答1:

I resolved the problem by adding the following CSS:

[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;
}

回答2:

I had a similar issue with the $state. But my old views do not stay forever. There is only some latency before they go away.

Not sure if it works in your case.

Anyway i just post it here for ur refernce.

App.config(function ($provide) {
$provide.decorator('$state', function ($delegate) {
    var state = $delegate;
    state.baseGo = state.go;

    var go = function (to, params, options) {
        options = options || {};

        //the part that supposed to be removed after the new $state
        //is wrapped with the "fade-in-up"
        $('.fade-in-up').html(''); //i cheat a bit using jQuery
        this.baseGo(to, params, options);
    };

    state.go = go;

    return $delegate;
  });
})

来源：https://stackoverflow.com/questions/39071361/ionic-app-back-button-causes-previous-state-screens-to-overlap