After transition, screen is stuck for awhile (due to body.disable-pointer-events)


#1

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.


v1.0.0-beta.8 "fermium-flamingo" released!
#2

Hey @deanq,

There has been some work done to animation that could have been the issue. Can you try the nightly builds?


#3

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');
...

#4

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


#5

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.


#6

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.


#7

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


#8

Yes, I use a sidemenu.


#9

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.


#10

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!


#11

Try updating to beta12 or beta13


#12

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