Brief black screen during navigation

This works fine for me!
Thanks!

Yeah im wondering how the ionic team isnt seeing this at all for the last x versions? weird

your solution. Can you explain it/

In what file? what is the location? thanks

Alright so I finally figured out what was causing the issue for me. In the view I was transitioning from I had an extra <div> above the <ion-view> where I was declaring a different header to be usedā€¦ removing this and using the correct ion-nav elements seems to have fixed the problem for me.

From this:

<div class="bar bar-header bar-positive">
  <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  <h1 class="title uppercase" >{{steak.cut}}</h1>
  <button class="button button-icon icon ion-knife" ng-click="modal.show()">Steak</button>
</div>
<ion-view> 
{The rest of my view here}

to this:

<ion-view title="{{steak.cut}}">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-knife" ng-click="modal.show()">Steak</button>
  </ion-nav-buttons>
{The rest of my view here}
3 Likes

You are right. For me it was to remove this from the templates:

<ion-header-bar class="bar-balanced">
   <h1 class="title">your title</h1>
</ion-header-bar>

This should not go there as you already defined your header in your index.html

1 Like

The post by rubyme8 seems to be working for me (thanks) except in the case where I have a on-swipe-right="returnToSchedule()" on the ion-view tag.

All the returnToSchedule() function does is to call $ionicNavBarDelegate.back() but that causes the black screen to show again during the animation.

Any idea if there is a solution for this?

This issue just started for me upon upgrading from Beta 13 to Beta 14 with no other changes on my end. I hate to downgrade back to Beta 13ā€¦

I fixed my issue by removing the abstract state from which it inherited. I think the problem may lie with the required template for an abstract state, but I donā€™t know if itā€™s the same with anyone else?

I got same issue due to using dynamic loading of templates. I also use abstract state.
My ionic version is 1.2.13 which is beta-13. Cordova version is 4.1.2. Angular version is 1.2.
I am testing my app in android simulator. Android version is 4.4.2 kitkat.

Yep - Iā€™ve had the exact same problem with moving into an abstract state (or rather moving into a child state that has an abstract state parent) ā€“ removing the abstract state worked to remove the problem completely on desktop chrome, but it persists on mobile, albeit in a gentler fashion, at least on ios8.

Hi All,

I am also facing same animation issue in IOS , below is my case.

Login page > dashboard > Account info > Detial > Logout > Login

In above scanario when user logout I use all the possible solution in the below code.

        $ionicHistory.nextViewOptions({
              disableBack: true,
            disableAnimate : true,
            historyRoot  : true,
            });
        $ionicHistory.clearCache();
        $ionicHistory.clearHistory();
        
        $ionicSideMenuDelegate.toggleLeft(); // Menu didn't close in this case  so toggle menu assign code.
        $ionicSideMenuDelegate.canDragContent(false);

        $state.go("app.login");

View stuck and show black screen left and right for about half second than get stable.

Let me know if I am missing something.

I had same problem. The problem was due to loading dynamic template after REST API call to server.
example:
<ng-include src="getTemplate()"></ng-include>

<script type="text/ng-template" id="template1">
Template 1
</script>

in controller
$http.get(url).then(function (data) {
$scope.getTemplate = function () {
return ā€˜templateā€™ + data.template_num;
}
});

function getTemplate isnā€™t availation untill REST API call returns. Thatā€™s why black screen comes.

iā€™ve mentioned this behave if you try to go to a view with a collection-repeat.

I am also loading the template using ng-include but donā€™t have any collection repeat in that template, what is the solution in case if I have a collection repeat ?

In my case removing all custom classes from ion-view solved the problem.

I added an explicit background to the root ion-nav-view.

Sometime ionic sets it to #000.

This took a ton of debugging to figure out for me on beta14, but it ended up being my css.

.has-header { -webkit-transition: 200ms top; }

I had been using that for a flash message transition. Might not be the problem for most here but check if your css styles are messing with something ionic-specific.

Hey guys I have seen this a bunch of times throughout my app as well during slide tranistions. I have seemed to override the black background by adding the following css.

[nav-view-transition][nav-view-direction] {
background-color: transparent;
}

this should override the background color for any platform in any slide direction

6 Likes

did you find any solution to the black screen?