This only happens on an actual device. Testing on browser and emulator works fine, so it’s really difficult to debug what’s going on. I have narrowed it down to the delay in removing “.disable-pointer-events” from the body tag. Anyone else experiencing this with beta-8? I switched to beta-5 and it works fine there.
Hey @deanq,
There has been some work done to animation that could have been the issue. Can you try the nightly builds?
I have tested v1.0.0-beta.8-nightly-212 with iPhone4 and it still gets stuck on page transitions. It takes about 10 - 15 seconds before .disable-pointer-events is removed from the body tag. I placed a log like so to see it on the console:
Under $ionicViewService.getRenderer.enter
...
$animate.enter(element, navViewElement, null, function() {
document.body.classList.remove('disable-pointer-events');
console.log('removed .disable-pointer-events');
...
Is there anything special about how you’re doing the transitions? Along the lines of ui-router, how are you transitioning to the next page? Clicking an href, ui-sref, or $state.go()? Do you have a simple codepen that demonstrates the issue? Thanks
This occurs on ui-sref and the ionic’s button. No special transitions involved. I have removed all other custom components/directives being used in those views to isolate the problem. I can tell you that this log removed .disable-pointer-events never gets triggered in previous versions.
Hello I am experiencing same issue. After transition from a login page I can’t tap on any buttons but side menu button.
Transition is from a login page with regular state to a nested state page. Here are my states:
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl'
})
.state('app.main-page', {
url: '/mainpage',
views: {
'menuContent' :{
templateUrl: 'templates/main-page.html'
}
}
})
So here I go from login state to app.main-page state which is a child of app state.
The strange thing is that pointer events only disabled on buttons of the child state! Not parent ‘app’ state. So only menu button on a parent scope is working.
Here is the html of app state:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive" hide-back-button="true">
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios7-arrow-back"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header bar-positive">
<h1 class="title">MENU</h1>
</header>
<ion-content class="has-header stable bg-dark">
<ion-list>
<ion-item class="item-icon-left">
<i class="icon bh-user"></i>
Logged in as:
<span class="calm">
<b>
{{user.firstname + " " + user.lastname}}
</b>
</span>
</ion-item>
<ion-item class="item-icon-left" ng-click="goTo('app.main-page')">
<i class="icon bh-bookmark"></i>
Main Menu
</ion-item>
<ion-item class="item-icon-left" ng-click="goTo('app.help')">
<i class="icon bh-information"></i>
App Instructions
</ion-item>
</ion-list>
<button class="item button button-full button-assertive item-icon-right" ng-click="logout()">
<i class="icon ion-log-out"></i>
Log Out
</button>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is the html of child app.main-page:
<ion-view title="MAIN MENU" hide-back-button="true" xmlns="http://www.w3.org/1999/html">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<!--Notification bar-->
<notification-bar class="bar-msg"></notification-bar>
<ion-content class="has-header padding" ng-class="{'has-msg': displayNotif}">
<!--<div class="list list-inset background-grey">-->
<div class="login-title">Page</div>
<div class="row">
<div class="col">
< a href="#/app/employees" class="button button-block button-dark bhbutton-main">
<i class="icon bh-search bhicon-main"></i>
Search Employees
</a>
</div>
<div class = "col">
< a href="#/app/recentactivity" class="button button-block button-dark bhbutton-main">
<i class="icon bh-chat bhicon-main"></i>
Recent Pages
</a>
</div>
</div>
</ion-content>
</ion-view>
So I my problem is that pointer events are disabled only on a child page of a parent.
I will try to put a codepen together to try to replicate the issue.
Unfortunately I was not able to replicate this issue in a codepen. However using Chrome dev tools I determined that after transition from my login page (not nested state) to main page (which is nested view of sidemenu view) that contains side menu, ionic adds .menu-open class to my body html tag!
<body ng-app="EmpDirApp" class="grade-a platform-browser platform-macintel platform-ready menu-open">
I think this is causing my issue.
Also I created a github issue for this https://github.com/driftyco/ionic/issues/1724
Hey @deanq do you have a sidemenu on the page you are transitioning to?
@adam does this make sense to you?
Thanks
Yes, I use a sidemenu.
My bad. This is totally my fault. Please close this issue. I found a problem in my code. The problem was that on logout button click I was just redirecting to a login page without closing side menu with menu-close directive. After adding menu-close directive to my logout button the class of .open-menu is properly removed.
1 Like
Hi deanq,
I noticed the same problem. The content is resized for about 2-3px after the animation is finished at page transition. I’ve also notices, that the class “disable-pointer-events” is removed from the body and the problem occurs directly within this time slot.
I’m using ionic-11, any advice?
Thanks!
Try updating to beta12 or beta13
Hi kikados,
I tried beta-13 and the problem is fixed, thanks!
However, I haven’t updated to beta-12/13, due to performance issues. Now I have to cope with it.
Cheers
Stefan