Ionic2 - Content Heavy Side Menu Performs Poorly on Android

[adnantopal]

Short description of the problem:

Content heavy (ion-refresher, ion-list with 50 items, footer toolbar) right side menu is very laggy on Android. I have two side menus in my root view. Left menu is really light with a list with only two items and opens smoothly as it's expected. However, it's almost impossible to swipe open the right menu. It only opens after fastly swiping several times (sometimes more than 10+ times). The problem only exists on the device (HTC M8, Android 5.0.2) and I have no problem on the desktop browser.

What behavior are you expecting?

The menu to open fast and smooth as it's expected.

Steps to reproduce: Have a root view like the one described in problem description or below.

My app.html

<ion-menu side="left" [content]="content">

  <ion-content class="menu-content-left">
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-menu side="right" [content]="content">

  <ion-header>
    <ion-toolbar color="eksi">
      <ion-item class="channel-item" color="eksi">
        <ion-label>kanal</ion-label>
        <div item-content>
          <select [(ngModel)]="channel" (ngModelChange)="fetchChannel()">
            <option *ngFor="let chan of channels" [ngValue]="chan" [attr.selected]="channel.value == chan.value ? true : null">{{chan.title}}</option>
          </select>
        </div>
      </ion-item>
    </ion-toolbar>
  </ion-header>

  <ion-content class="menu-content-right">
    <ion-refresher (ionRefresh)="fetchChannel(1, false, $event)">
      <ion-refresher-content
        pullingText="başlıklar yenilenecek"
        refreshingText="başlıklar yenileniyor...">
      </ion-refresher-content>
    </ion-refresher>

    <ion-list class="topics-list">
      <ion-item *ngFor="let topic of topics" (click)="openTopic($event, topic)">
        {{topic.title}}
        <ion-badge item-right color="eksi">{{topic.entry_num}}</ion-badge>
      </ion-item>
    </ion-list>
  </ion-content>

  <ion-footer>
    <ion-toolbar color="eksi" class="has-pagination">
      <pagination [pageData]="pageData" (onPageAction)="fetchChannel($event)"></pagination>
    </ion-toolbar>
  </ion-footer>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

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

Run ionic info from terminal/cmd prompt: (paste output below) Your system information:

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 2.0.0-rc.2 Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 OS: Node Version: v4.4.4

[manucorporat]

This should be much smoother in RC3 thanks to this PR: https://github.com/driftyco/ionic/pull/8986

[jgw96]

Hello @adnantopal ! Have you gotten a chance to try this in rc3 ?

[adnantopal]

Yeah, I actually gave it a try and was thinking about writing my impressions here.

I applied the changes made in the mentioned commit but it didn't make any real difference. Same performance problem persists.

I thought maybe it's because of additional DOM elements that custom Ionic elements like ion-list and ion-item adds to the document and makes the menu heavy. Deleted custom elements, replaced them with simple DIVs and performance improved drastically. The only problem is now, if you swipe fast, the menu doesn't open at times. However, there's no problem opening the menu with dragging from the edge of the screen.

[adnantopal]

I have done some more experiment and here are the results:

• RC3 release didn't solve the problem. On the contrary, updating the library to RC3 made the opening the menu by swiping almost impossible.
• Removing custom Ionic elements and using DIVs instead still causes performance loss despite it makes opening of the menu smoother.
• When opening right menu by dragging and swiping, developer tools gives a warning message as following:

Handling of 'touchmove' input event was delayed for *** ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

• There's no error message or performance loss when opening left menu both by dragging and swiping.

[manucorporat]

@adnantopal more performance improvements have been merged, can you try against nightly?

npm install ionic-angular@nightly --save

[adnantopal]

Menu open transition is much smoother now. There's no problem with the left menu, it works perfectly. Opening the right menu by dragging is also smoother. However, opening the right menu by swiping is completely broken and I get the following error once the application started and I have no way of knowing what that means by looking at the compiled code. I don't get this error when the application is running on RC3.

Error: Uncaught (in promise): undefined(…) polyfills.js:3

function o(t) {
    var n = t && t.rejection;
    n && console.error("Unhandled Promise rejection:", n instanceof Error ? n.message : n, "; Zone:", t.zone.name, "; Task:", t.task && t.task.source, "; Value:", n, n instanceof Error ? n.stack : void 0),
    console.error(t)
}

[manucorporat]

@adnantopal I can't reproduce the right menu crash, can you provide a minimum repo that reproduces the issue?

[adnantopal]

@manucorporat I didn't mean to say it crashes and don't know if the error is related to the menu, but it started to appear when I updated the app to nightly. What I mean by broken is that it's now impossible to open the right menu by swiping. When I swipe from the right, there's a really brief appearence of backdrop (screen darkens a little) an then nothing happens, right menu doesn't appear at all. When I do this in RC3, 20 or 30 pixels of right menu transitions in and then transitions out again. I have 50 items on the list that I iterate over in the right menu and gradually reducing the number of items increases the performance. Might it be related to the device I'm testing the application on because it's a three years old device?

[adnantopal]

@manucorporat I don't know exactly what's causing the problem (OS version, hardware related), but after testing the app with newer devices, I can confirm that this is a device related issue. I noticed no problem with the menu and it works as it intended to be in newer devices (Samsung Galaxy S7 Edge, Google Pixel).

[jgw96]

Hello all! After some testing with even older, slower devices such as my Nexus 7 with 5x cpu throttling turned on I cannot reproduce this issue. Because of this I am going to close this for now. Thanks for using Ionic!

[praful021]

Hi, I am using Ionic 3 and I getting same issue. On some devices its working but not smooth on some its not at all working. Working on MotoG4+. Not working MotoG2. Please provide some solution.

[ionitron-bot[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.