Brief black screen during navigation

ionic-v1
1

Hi, first of all thank You for the great work, I’m just passed from a Foundation app to using Ionic, with a painful increase of performance.

My situation: I’ve got a (I believe) simple application with a side menu, and a navigation:

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear">
        <i class="icon icon-chevron-left"></i>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view animation="slide-right-left"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left" ng-controller="headerController">
      <ion-content>
      <ion-list>
        <!-- my menu -->
      </ion-list>
      </ion-content>
  </ion-side-menu>
</ion-side-menus>

All going well, but when I launch the navigation transitions (using a simple $state.go()), before the full rendering of the target state the content of the page is completely black, for about half a second.

Is anyone having a similar issue?

2 Likes
2

Which os are you using, are you developing in browser or on device?

3

I’m testing on both desktop browser (using latest Firefox) and on Android.
Both have the same effect.

4

When i’m routing, i get a blank page for about half a sec except for the tabs which are preloaded I think.

1 Like
5

Could be a similar problem, except maybe that I’m getting it black instead of blank… do You have the same problem on all latest versions?
I’m using the latest beta 12.

6

Yes, i’m also using beta 12, which for me made an increase in bugs. Also existed in beta 11. I thought it had something to do with rendering the dom, so I tried to include $ionicLoading and this showed up after that half a sec so it wasn’t really of any use. :frowning:

7

Little update: it seems that adding a

<div ng-cloak></div>

around each ion-view solves the problem… maybe it should be added as a “default” directive for navigation views?
@sjerd maybe this can help on your issue?

1 Like
8

it didn’t, the template caching update made it alot faster though.

9

Can you explain in brief?

10

I have the same problem. In the sidemenu demo, whenever I select a playlist to navigate to, the page which being hidden by the swipe animation turns black for a brief moment. It’s noticeable enough to make the app feel distorted.

11

I have the same problem. View slide animations broke after the latest update. I’m releasing my app soon and had to disable all view animations until this issue can be resolved. When a view transitions, it looks like the content for the next view isn’t available yet and it therefore shows only a black background until the view catches up?

12

@xaviertnc I experienced something similar and edited the body background in ionic css from #000 to #fff and wrapped each view in ng-cloak divs as mentioned by @Vargash above. This made it a lot better however there is still the occasional black flicker.

13

same problem, I’m seeing the black screen on page slide-in-out

14

I noticed that it only happens to me ( testing in Google Chrome ) when I add the “fade-in-not-out” class to the tabs for smoother tab transitions. The tab transitions work fine, for some reason this affects the slide-in-out pages.

If I take that class away and make tab transitions instant, the black is gone from the slide-in-out transitions.

15

Hi,

is there any progress for this bug? I updated my app from Beta11 to Beta 13 and now the app
also flickers black between page transitions.

2 Likes
16

+1 Upgraded from 11 -13 seeing black page in between transitions

I should also mention Im using angular 1.3.0-beta.17. (which seemed to work fine with ionic beta-11)

17

ion-nav-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}

18

@DigitalSkyline I dont think the concern is the black being defined as a background color becasue that can easily be overwritten but more that content of the out screen disappears on its way out, which is a clunky, jarring experience.

19

So here is what I found fixed the problem for me… It seems some left/right positioning was commented out in the latest beta, that caused this problem. You can either uncomment them in the core or just add this after you load ionic…

.slide-ios,
.slide-left-right-ios7,
.slide-right-left-ios7.reverse {
  > .ng-enter, &.ng-enter,
  > .ng-leave, &.ng-leave {
    right: -1px;    
    left: -1px;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    z-index: 2;
  }

}
.slide-ios.reverse,
.slide-left-right-ios7.reverse,
.slide-right-left-ios7 {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    right: -1px;    
    left: -1px;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
    z-index: 1;
  }

}

This also solves another bug on here for the width of the slides being set to 0

3 Likes
20

I’m having the same exact issue. It seems prevalent in beta’s 7 through 13. However the flash of black during the transition starts in beta 10. The last release that works 100% without issue is beta 6. Still looking for a solution…