Black block on screen while transitioning - after update to rc.0

ionic-v1
1

When I’m transitioning trough screens I am randomly getting this black block at the right hand side of my screen on the iPad.

Only started occurring after I updated to rc.0 - any ideas why this is happening?

image
IMG_0076.PNG768×1024 5.46 KB

2

The same behavior in our app. We’re testing it with every new release candidate (e.g. ionic-1.0.0.rc-2) - no change: randomly black block at the right side during screen transitions - only on iOS (8.1.3), no problems with Android.
It is a real show stopper for us regarding moving to the release candidate, so we have to stick with the last beta 14.
Do you see any chance to have a look into it and fix it ?

famibo

3

I have same issue with ipad. I am on ionic-1.0.0.rc-3. It will display black screen when transit from one page to other. Also issue only with ipad device. In i-pad simulator there is no such issue.

4

I found the solution here on the ionic forum:

Short answer: it is a css issue, please use following css code to get rid of it:

[nav-view-transition=“ios”][nav-view-direction=“forward”],
[nav-view-transition=“ios”][nav-view-direction=“back”] {
background-color: transparent;
}

1 Like
5

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.

Has anyone found a solution to this yet?

6

Any solutions?

I get this black screen when I have nested states within abstract tabs going back.

I have found that my active state does not receive the nav-view=“leaving”, it simply goes from active instantly to cached.

Any ideas?

7

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

Please help me on this.

Thanks…

8

I tried that, but the spinner disappears too.

i found a
variable for iOS - can’t seem to find the android equivalent
$content-ios-transition-background: transparent;