Ionic 2 - iOS - SearchBar + back-navigation = black screen

[SkogDev]

Short description of the problem:

I've had this issue since the early betas, but not until recently was I able to find the exact recipe to reproduce the bug. The result of the bug is a blackscreen view, which can only be fixed with a manual refresh. This bug is iOS-only.

In short:
Do a search in a list of items, every item is a button which navigates the user to a new view.
Quickly tapping the navbar 'back' will sometimes result in a black view and no errors.

Tapping one of the items in the list without a search, would not trigger the bug.

What behavior are you expecting?

Well .. the expected behavior would be navigation without the result of a black view.

Steps to reproduce:

1. Add a new ionic 2 tutorial --ts project.
   ( ionic start t tutorial --v2 --ts )
2. Replace code from plunker: https://plnkr.co/edit/g1IrlkyXGFHecDPqP49o?p=info
   hello-ionic.html, hello-ionic.ts, item-details.html and item-details.ts
3. run app on an iOS device. (tested on an iPhone 6s)
   'ionic run ios' or 'ionic build ios' and run with xcode
4. perform a search in the searchbar: i.e the letter 't'
5. tap one of the items in the list, and when navigated to the new view QUICKLY tap the 'Back' button in the new view several times. 1/5 times this will result in a navigation back to the first view, where everything is black.

Which Ionic Version? 1.x or 2.x
Ionic 2

Plunker that shows an example of your issue

https://plnkr.co/edit/g1IrlkyXGFHecDPqP49o?p=info

Your system information:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.4.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[danbucholtz]

@Daforest,

Working on this now. Will hopefully be in beta 9.

Thanks,
Dan

[SkogDev]

@danbucholtz Great news!

[danbucholtz]

@Daforest,

This should be fixed now. Please let me know if this comes up again after the next beta release.

Here's the PR:
#6884

Thanks,
Dan

[SkogDev]

@danbucholtz Tested on Beta9, this bug is not fixed

[SkogDev]

I'll admit, it's trickier to reproduce, but still possible.

Before:

After:

[danbucholtz]

@Daforest,

Can you make a video/gif of what you're doing to get into that state?

Thanks,
Dan

[SkogDev]

@danbucholtz Sure, Ill try making one tonight. On a side note .. Following the "steps to reproduce" above, would create the same result.

[SkogDev]

@danbucholtz Here is a video of the bug. I managed to get it into the "black view state" on the third attempt. Video

[danbucholtz]

Interesting... the surprising thing to me is you did it with the keyboard dismissed. Our fix was making sure the time needed to close the keyboard was accounted for.

Can you do me a favor and make another video of the same thing with the following added to your app.core.scss:

.click-block-active{
  background-color: red;
  opacity: .5;
}

This will make our "click blocker" red and transparent. The click blocker is active when the app is disabled. The app is disabled when transitioning. Basically, I am hypothesizing that the app is re-enabling before the transition completes. Once activated, the click on the back button goes through and starts another transition. The transition logic gets confused (since they're async) and ultimately bails. That is my current theory.

Thanks,
Dan

[SkogDev]

@danbucholtz

Here is a video with the clickblocker active, Video

[danbucholtz]

Thanks, I'll take a look again now that I see how you're doing it. I Appreciate your help!

Thanks,
Dan

[qingfx]

I'm also seeing this issue, inside mobile Safari. The repro steps are also related to searchbar and back button.

[jgw96]

@560889223 would you mind giving this a try with the latest nightly? There have been alot of changes to layout that may have fixed this issue. To try nightly just run npm install ionic-angular@nightly and you should be ready to go. Thanks!

[jgw96]

After some testing with the latest nightly i cant seem to reproduce this issue anymore. Because of this i will be closing this issue for now, but if anyone else runs into it with the latest nightly feel free to comment and i will happily reopen. Thanks everyone!

[chack]

I run into it in Beta 11, see #7564

[pivalig]

@danbucholtz

About your video. I have the same when tap on back button too fast. I think this issue about page transition.

I made a workaround in ionic-angular/components/navbar/navbar.js

the function
Navbar.prototype.backButtonClick()....

var lastClick;
Navbar.prototype.backButtonClick = function (ev) {
ev.preventDefault();
ev.stopPropagation();

    if (!lastClick) {
        lastClick = new Date();
    }
    else {
        var dif = new Date().getTime() - lastClick.getTime();

        lastClick = new Date();
        if (dif < 1000) {
            return;
        }
    }

    this.navCtrl && this.navCtrl.pop();

};

so i just not able to make this.navCtrl.pop(); if click back too fast

[manucorporat]

I think this issue was already fixed in head of master. You fix might work, but it does not resolve the root of the problem.

what if I call this.navCtrl.pop() from a different place?

[pivalig]

wow, great!

[AngelaRg]

@danbucholtz @jgw96 @manucorporat
Hi, I'm experiencing this issue (Screen goes black, only nav bar is shown) but by doing multiple fast taps on a navigation tab. Only happens on iOS, but I can't reproduce it on a clean new ionic app must be some element or configuration in the app causing it. I'm not even sure where to start looking for the problem, afaik it could be anything. My app has 3 navigation tabs and you can crash them one by one. Any remote ideas that could help me? Are there other similar issues reported with solutions that could help me?

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.0
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.0.1

System:

Node       : v6.10.2
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 4.6.1

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.