Entering view 'stuck' with a white overlay covering it

@aderowbotham wrote:

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>

Posts: 1

Participants: 1

Read full topic