hunijkah hunijkah - 3 months ago 68
AngularJS Question

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'
}
}
})


screen overlapping

Answer

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