I have a persistent but intermittent bug with my app.
I have a state ‘app.settings.home
’ and a button that links to this state:
<button ui-sref="app.settings.home">
Sometimes when transitioning to that state the transition appears to not complete properly, and I am left with the inbound ion-nav-view
with the class disable-user-behavior
on it, and nested within that covering (always) 66% of the screen from the left is a semi-opaque white overlay:
<div class="pane" nav-view="entering" style="opacity: 0.9; transform: translate3d(-33%, 0px, 0px); -webkit-transition: 0ms; transition: 0ms;"></div>
This looks like this
Once it has happened once, it then happens every time the user navigates to the app.settings.home
state.
The $stateProvider code relating to this state looks like this:
$stateProvider
.state('app.settings', {
url: "/settings",
abstract: true,
views: {
'container': {
controller: 'SettingsCtrl',
templateUrl: "templates/settings.html"
}
}
})
.state('app.settings.home', {
url: "/home",
views: {
'settingsContainer': {
templateUrl: "templates/settings.home.html"
}
}
});
I have no custom transition code or custom CSS relating to transitions, I’m just using the ionic ‘sidemenu’ starter app.
What could be causing this and how can I fix it? Is this an ionic bug?
settings.html looks like this:
<ion-view view-title="Settings">
<ion-nav-view name="settingsContainer"></ion-nav-view>
<div class="bar bar-footer bar-light bar-footer-cappchur">
<a class="cappchur-logo footer pull-left" ui-sref="app.event.intro">
<img src="img/cappchur-logo.svg">
</a>
<div class="buttons pull-right">
<button class="button-icon icon ion-alert-circled" ng-show="!user.emailVerified"></button>
<button class="button button-icon icon ion-gear-a" ui-sref="app.event.intro"></button>
</div>
</div>
</ion-view>