Ionic 2 alpha.45 sidemenu broken

I created a test app to get the latest package.json along with trying to update other files like the webpack.config.js, i did it successfully but now i have an issue, my updated app has sidemenus, they work fine, for the first click, after that the backdrop doesn’t go away and i cant click anything inside the app, if i remove the backdrop html element from chrome dev tools, it works as expected.

This issue doesn’t happen in the test sidemenu app, nor in my app before update.

Confirmed, just opening the sidemenu creates a backdrop, clicking in the backdrop to close side menu closes it, but doesn’t go away, overlapping over all the app thus not letting interact with the app.

Also this only happens when using the emulator in chrome, the run command is broken.

I have the exact same problem when running the tutorial project on an android phone - clicking side menu button opens the menu but after dismissing the menu, can no longer click the button to reopen the menu.


Sean

Are you able to even compile? maybe it’s my OS as i’m in Ubuntu.

It’s not the OS. I’m running windows. Sending the app to android device works fine but the side menu is bugged

So the build problem is probably my Os or setup of Android or Cordova?

Same here… after closing the sidemenu for the first time, no clicks on the pages work anymore.
On the console I see the message “backdrop clicked” each time I click on the page.

As a temporary workaround, on the eventhandlers from the sidemenu, I’ve added the following code:

    setTimeout(() => {
        console.log('deactivating background');
        document.getElementsByClassName('backdrop')[0].style.transform = '';
    }, 1000);

There’s already a pull request to fix this, i think it will be fixed in next release.

Yeah there is a pull request. If you want to make it work, just comment the lane 638 of /node_modules/ionic-framework/animations/animation.js and it works again.

This stupid problem has been driving me crazy. I made a slightly different temp solution in case you or someone else was interested. This problem only seems to happen for me when I close the side menu, so I just added this to each page’s constructor.

//Ionic displays the backdrop by adding inline opacity and transform styles, so just overwrite these
var backDrop = document.getElementsByClassName(“backdrop”)[0];
//Hide it
backDrop.setAttribute(“style”,"");
//Fail Safe
backDrop.setAttribute(“onclick”,“this.setAttribute(‘style’,’’);”);
//Delayed override
setTimeout(function(){
backDrop.setAttribute(“style”,"");
}, 1000);

The solution proposed in the pull request will be included in next version of ionic, so you shouldn’t have to do this, besides your way uses css styling after it has done it’s thing, thus using valuable resources, the other solution stops the error from happening, not the simptoms.

For those who are developing and can’t wait for the next version: If you’re using chrome developer tools just switch the device to any Apple device, since this bug doesn’t seem to affect iOS. Works for me :wink:

Fixed in alpha.46, run:

 npm install ionic-framework@2.0.0-alpha.46 --save

to update it.