Brief black screen during navigation

how i described -> i set the background of the root ion-nav-view to my app background.

when using this method with a collection-repeat it doesn’t seems to work all i get is a blank view :frowning:

then you are doing something wrong? ^^

additional to that, you can follow @djett suggestion. To set background during transition to transparent.

2 Likes

Thank you! did work for me. I just had to remove a style tag that I put before of ion-view

Same problem, I using:
Ionic 1.0Rc2 + crosswalk + sass + app with sidemenu
The problem is for headers. When change (i.e. button back), the header change style and for <1s show a white header.
Same for opening a detail view from a list, the header flickr (style1 / color white / style2)

The list is a collection-repeat.

I will try with solutions proposed on this thread.

I could fix this issue using the below css: The below code removes the black color.

[nav-view-transition="ios"][nav-view-direction="forward"], [nav-view-transition="ios"][nav-view-direction="back"] {
  background-color: transparent;
}
1 Like

When I encountered this issue, it wasn’t just the abstract state. The black screen appeared whenever I transitioned between two different <ion-nav-view> elements. So, I made the entire app render into one <ion-nav-view name="main-container"> by specifying that each state render to this nav view explicitly. Like this:

$stateProvider
.state('login', {                                                                                                                                                                                                                                                  url: '/login',
    views: {                                                                                                                                                                                                                                                           'main-container' : {
            templateUrl: 'templates/login.html',                                                                                                                                                                                                                           controller: 'LoginCtrl',
        }                                                                                                                                                                                                                                                          },
    resolve:  {
        remoteAuctions: function(auctionService) {
            return auctionService.getRemoteAuctions();
        }
    }
})
.state('auctions', {
    url: '/auctions',
    views: {
        'main-container' : {
            controller: 'AuctionsCtrl',
            templateUrl: 'templates/auctions-index.html',
        }
    },
    resolve:{
        auctions: function(auctionService) {
            return auctionService.getLocalAuctions();
        }
    }
})

YMMV

I’m having the same issue when running my application on an iPad Mini using:

  • Ionic v 1.0.0.
  • Cordova 5.0.0.

At first I thought it was due to the complexity of the template I was transitioning to, but I stripped the target view in my application down to its most basic form (transitioning to an empty view) and I’m still seeing the issue, albeit in a much more subtle fashion than when the transition-in template was complex.

I’ve already tried various suggestions from the above thread:

  • Removing any abstract states in my application.
  • Adding ng-cloak to the ion-views.
  • Adding suggested CSS to fix the left-right positioning (this was suggested for an earlier RC).
  • Ensuring I use correct ion-nav elements - I’ve even removed these.
  • Ensuring the application renders into a single ion-nav-view element with my templates being ion-views.

I even tried pre-loading the templates with $templateCache:

  .run(['$http', '$templateCache', function($http, $templateCache) {
    $http.get('templates/project-detail.html', { cache: $templateCache });
  }])

Setting the background of the root ion-nav-view disguises the problem in my stripped down application, but it is still obvious that the content is flickering in when used in conjunction with a more complex view.

The following video demonstrates it on my empty view. The black half of the screen can appear for upwards of half a second on my more complex view creating a very jarring experience.

Is anyone else experiencing this on the latest version?

I’m seeing the same thing. I can even see part of the previous view during the transition. I’ve only had this problem since upgrading to ionic v 1.0.0 from Beta14. It’s bad enough that I think I’m going to downgrade.

It is working for me.

Thanks :smile:

I’ve solved adding a dummy state parameter with a random value for the target state:

$state.go(“app.event”,{eventId:eventId, rand : new Date().getTime()}, {reload: true, location:‘replace’})

But I was facing this kind of issue for transition like this:

list->element1->list->element1

on the other hand

list->element1->list->element2

was working fine

Here is what I did after many hours fighting with this…

Step 1:
I first applied the white background color like others have suggested (see CSS below).

Step 2:
I modified the timing of the opacity of the leaving view (see the CSS below) so that it starts to disappear (step 3 below introduces a code change to make the leaving view disappear) after the new view has slid in from the left pretty far. Note that the CSS is very similar to what ionic has, I just broke out the 3 transitions into 3 pieces and then changed the timing on the opacitiy property. Basically I am delaying the opacity as long as I can before making the leaving view invisible. This reduces the “bleed through” of the leaving/background view to the top level view.

    .platform-ipad [nav-view-transition="ios"][nav-view-direction="forward"],
    .platform-ipad [nav-view-transition="ios"][nav-view-direction="back"] {
        background-color: white;
    }

.platform-ipad [nav-view-transition="ios"] [nav-view="leaving"] {
    -webkit-transition: opacity 16ms linear 250ms, transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), box-shadow 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
    transition: opacity 16ms linear 250ms, transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), box-shadow 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
}

Step 3:
I modified the transition of the leaving view and instead of it going from opacity of 1 to opacity of 0.9, I brought the opacity all they way down to 0 (this had to be done in code - see below).

Search for “// iOS Transitions” in ionic.bundle and you’ll find this code nearby (or go to line 412 of https://github.com/driftyco/ionic/blob/1911b070a6a9e2b89c23a9fcfebe32b83e21f4e1/js/angular/service/ionicConfig.js)

 var d = {
      run: function(step) {
        if (direction == 'forward') {
          setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
          // ORIGINAL CODE:   setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);
          setStyles(leavingEle, (1 - 1 * step), step * -33, -1);  // Change this line here - change 0.1 to a 1
        } else if (direction == 'back') {

Change the 0.1 to a 1 on the line indicated. When run is called, step is 0 (to prepare things) and then 1. When it’s 1, it results in a value of 0, which is the new opacity of the leaving view, as opposed to 0.9.

(to make this a bit better, only change the code for iPads so do this, since the CSS is already only targetting iPads):

setStyles(leavingEle, (1 - (ionic.Platform.isIPad() ? 1 : 0.1) * step), step * -33, -1);

I’m pretty picky with these front end things and I’m satisfied with this workaround. Even on my very slow iPad 2 it’s so much better than it used to be. Hardly can notice.

1 Like

I had the same issue, for me I set all abstract state to non-abstract state. It solved the black screen immediately.
@djett suggested here to use flat states not nested nor abstract in this post, it worked as expected.

1 Like

Problem persists.
no suggested solution worked.

A fresh install of the “sidemenu” starter app on Ionic 1.1 has this “brief black screen” issue on iOS devices. It doesn’t occur when testing in Chrome or when testing in the iOS simulator, but it happens on the actual iOS device.

What happens:

  1. Install Ionic “sidemenu” starter app
  2. Build for iOS and run on an actual device
  3. Click a few items in the Playlists list, going “Back” after viewing items
  4. After a few clicks, you will see a black flash (looks like the background of the view being transitioned to) when moving from Playlists -> Single

The issue is much worse if you have complex content in your View. I only tested the stock starter app after trying to figure out which part of my own code was wrong. Turns out, it wasn’t my code.

My solution: This is a hack I got from user “epuddu” above: I added a random state parameter value to every transition (I guess forcing Ionic to NOT use a cache). So, instead of:
href="#/app/playlists/1"
I use
ng-click="go(playlist.id)"
and then in PlaylistCtlr:
$scope.go = function(id) {
var d = new Date().getTime();
$state.go(‘app.single’,{playlistId:id, rand:d});
}

That fixes the black flash for me.

So Ionic team: Something wrong with the view cache mechanism?

1 Like

I noticed this error in one of my apps lately and was able to fix it by adding the following CSS:

ion-nav-view { background-color: transparent !important; }

Hope this works for some of you!

1 Like

Hey all, overriding this style using plain CSS as suggested so far is not the way to go if you want to do it properly.
And by properly I mean, using the SCSS variables that ionic uses. Thats the preferred way to override ionic stuff from what I understand.

The variable is $ios-transition-container-bg-color and is located in _transitions.scss.
For those not familair with overriding the ionic variables, you would simply add set the variable in your app SCSS, somewhere like ionic.app.scss or _variables.scss

E.g.:
$ios-transition-container-bg-color: #fff;

or, as some have suggested using transparent, you can use:

$ios-transition-container-bg-color: transparent;

I dont however, know WHY this background is set for ios and not android, I have a separate thread I created for that here: Why does ios need a black background in _transitions.scss

2 Likes

You saved my day mate. Thanks :)))

Hey, Thanks for your answer, it worked for me. but the black screen only getting transparent the scroll bar is still showing which shown in the screenshot of the below link.

Please help me on this.

Thanks.

Still have this issue in 2022 on ionic5