bug: Screen goes black: action sheet, modal.. etc

[ihadeed]

Type: bug

Ionic Version: 2.x

Platform: ios 9 webview

When clicking a button to open an Action sheet or a modal, the screen goes black right away.

Console log would only output this (using Safari web inspector):

[ihadeed]

Also would like to add that displaying an alert sometimes makes the screen go black too .. .only on iOS

[brandyscarney]

Can you please run ionic info from inside your project folder and give me the Ionic Version you are using? Also, what is the code you are using to call this?

[ihadeed]

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Version: 2.0.0-beta.0
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v4.2.4

I'm creating an ActionSheet object inside a NavController.present() call ... do I have to create the action sheet then present it?

        this.navCtrl.present( // Presenting on the current nav controller
            ActionSheet.create({ // A new action sheet, defined by options below:
                title: 'Options',
                buttons: [
                    {
                        text: 'Advanced edit',
                        handler: () => {
                            let EditModal = Modal.create(EditTask, task);
                            this.navCtrl.present(EditModal); // Displays a modal, instance of EditTask class.
                            EditModal.onDismiss((data) => {
                                if(data){
                                    task = data;
                                    DB.updateTask(task).then(
                                        (res : any) => {
                                            task._rev = res.rev;
                                        },
                                        err => console.log(err)
                                    );
                                    this.refreshTasks();
                                }
                            });
                        }
                    },
                    {
                        text: 'Delete',
                        style: 'destructive',
                        handler: () => {
                            this.deleteTask(task); // Deletes a task
                        }
                    }
                ]
            })
        );

[brandyscarney]

Hmmm no. I am able to see it working using the given code in Chrome, Safari and Firefox and an iPhone 6 simulator running iOS 9.2. Can you inspect the screen and see where the black div is coming from? Also, do you have these lines in your webpack.config:

ionic-team/ionic-conference-app@2ed59e6#diff-11e9f7f953edc64ba14b0cc350ae7b9dL8

[ihadeed]

I deleted the lines referring to web-animations from my webpack config file. I will try to inspect the emulator screen and I will get back to you.

UPDATE:
The black screen that I see is the <ion-nav> element with the class has-views. If I take out the background property from the CSS it just becomes a blank white screen instead.

UPDATE 2

1. I click on the button that triggers the action sheet, it adds the element <ion-action-sheet> to the DOM and then it throws the error I posted in my initial post.
2. I click again on that button and the screen goes black without any changes in DOM.

UPDATE 3
I provided you with access to the repository that contains my code. You can access it by following this URL: https://github.com/ihadeed/taskception

The function that triggers the ActionSheet is in /app/pages/main/main.ts line 141

Sorry if it's not so organized, I'm kind of a newbie to Github.

[brandyscarney]

Okay thanks! I'm about to board a plane so I can take a look later tonight or maybe this weekend.

[ihadeed]

I appreciate your help.

Have a safe trip.

[brandyscarney]

Thank you! So I downloaded your repo, ran npm install and did an ionic serve - everything looked normal. Then, I ran ionic run ios and that also looks good. This is what my ionic info looks like:

Cordova CLI: 5.3.3
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.0
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v0.12.4
Xcode version: Xcode 7.2.1 Build version 7C1002

Could you try removing the node_modules folder and then doing a fresh npm install?

[ihadeed]

My ionic info looks exactly the same except I have Cordova CLI 6.0.0

I just deleted the whole project and cloned it back from github, did npm install and ionic state reset and then ran ionic run ios...

• The app refused to build, saying there was a file missing (sorry couldn't copy the error message)
• I ran cordova platform rm ios and cordova platform add ios
• I ran ionic run ios again and the application ran fine now .. I see the tutorial slider and I am able to add tasks
• I click on the more icon and the action sheet pops out
• However, when I clicked on Advanced Edit to open up the edit modal the app went black again ..

Also since you have tried the app, did you experience the issue I reported here: #5432

[ihadeed]

Just tried it on iPad 2 Simulator...
The action sheet doesn't show. I only see a backdrop.

Update : never mind it seems like it's an issue when I simulate it from XCode..
If I stop the process from XCode and just run the app like a normal app on the simluator I see the action sheet fine. But I still get that black screen after I press on Advanced Edit

Update: This shows up on my console when I first launch the app in simulator

[adamdbradley]

With the error self.ele.animate is not a function tells me something is outdated. element.animate is from the web animations API, which starting with alpha56, Ionic does not use.

[ihadeed]

I developed the app with Ionic alpha56
When Ionic beta0 was released I did the following:

• Changed the Ionic version in my package.json
• Removed 3 lines in webconfig.that refere to webanimations
• Deleted my node_modulesfolder and ran npm install
• Ran a ionic state reset to reinstall and build platforms

Am I missing something?

[ihadeed]

@adamdbradley @brandyscarney do you think the issue is from Ionic or something else? have you managed to reproduce the problem?

Thanks.

[adamdbradley]

Be sure the return false; in the action sheet's handler. I think what's happening is that they click the button which opens your modal, but because there's no return false, an action sheet's button default is to also close the action sheet. But returning false prevents the default from closing the actionsheet.

This fix would have also helped out with this issue: #5483

[danbucholtz]

I see this issue pretty consistently when displaying modals in iOS. I cannot come up with a concrete way to reproduce it yet, though.

[ihadeed]

UPDATE: I realized that fix was not included in the latest ionic release. So I cloned the repo and built it. However I still get the same results below, no change.

I updated my app to latest version of Ionic and Angular. Looks like it works fine now but I still see the black background for a second there.

Here is what it looks like in Chrome:

And this is what it looks like in iOS simulator:

[adamdbradley]

I still haven't been able to reproduce this with the latest changes in master. Here's the test I've been using: https://github.com/driftyco/ionic/blob/2.0/ionic/components/action-sheet/test/basic/index.ts#L36

Does the button's handler return false? How can I update my test to replicate your issue? Thanks

[ihadeed]

@adamdbradley you can checkout my repo here https://github.com/ihadeed/taskception/blob/master/app/pages/main/main.ts#L151

[brandyscarney]

We're going to move this into beta.3 because we believe it will be fixed in the next release. Can you test against beta.2 when we release and see if it fixes it?

[ihadeed]

@brandyscarney will do for sure.

I tested your repo version two days ago and it didn't make a difference. I will try again once you release beta 2.

Thanks for following up.

[ihadeed]

Thank you @brandyscarney and @adamdbradley. The issue is fixed now after updating to beta.2

I appreciate your help!

[brandyscarney]

@ihadeed Awesome! Glad it is working. 😄

[ihadeed]

@brandyscarney @adamdbradley

FYI ..

Using return false; in the action sheet button handler still has issues. Everything works fine if I don't use it though.

Here is a GIF demo:

[adamdbradley]

Ok, i see the issue now. On it! Thanks!

[adamdbradley]

Awesome, thanks for all the help, I think it should be fixed now. Thanks!