Black screen on right side of view when using back button

ionic-v1
1

Hey Guys,

I have a tabbed application where the tabs are abstract and then all other views are on top of that.

When I use the back button on my application, I see a black screen on the right side.

When inspecting the DOM, I notice that the view which is ‘leaving’ is not receiving the nav-view=“leaving”, it goes straight from active to cached.

Any idea why this might be happening? I believe if I can get this view to receive the nav-view=“leaving” everything would work properly.

Here are my routes:

tabs ( abstract )
tabs/jobs
tabs/jobs/job-detail
tabs/jobs/job-detail/section-detail ( this is the black screen when going back to job-detail )

.state('tab.jobs', {
            url: '/jobs',
            views: {
                'tab-jobs': {
                    templateUrl: 'templates/tabs/jobs/jobs.html',
                    controller: 'JobsController'
                }
            }
        })

        .state('tab.job-details', {
            url: '/jobs/:jobId',
            views: {
                'tab-jobs': {
                    controller: 'JobDetailsController',
                    templateUrl: 'templates/tabs/jobs/job-detail.html'
                }
            }
        })

        .state('tab.section-details', {
            url: '/jobs/:jobId/:sectionId',
            views: {
                'tab-jobs': {
                    controller: 'sectionDetailsController',
                    templateUrl: 'templates/tabs/jobs/section-detail.html'
                }
            }
        })

#nav-view

2

try to remove the abstract-property of your base state.

i mentioned this problem in combination with abstract states.

And if this is not working --> try to set an explicit background-color to ion-nav-view and ion-view.

3

So setting the background style sort of ‘hides’ the problem, but I see that the top state which should be animating ‘out’ to the right, actually ends up with styles that animate it in from the left.

And it’s nav-view=“cached” instantly so it’s hidden.

I have removed abstract tabs from my app.js folder, however now when I navigate to the page the back button is gone, so it looks like my ionic history gets messed up. Any ideas?

Thanks for your help!

4

I have added a view in front of the abstract tabs so that this view does not touch the abstract view. The problem still persists regardless of navigating back to an abstract view or not.

I’m now more convinced the issue is because of a dynamic ng-repeat where you can push new values to the array