Poor performance with Ionic 2 tabs and segments on iOS

Ionic Framework ionic-v3
1

I am revamping my ionic 1 with ionic 2 but found out that switching between tabs and segments on iOS is super laggy after each tap.

I haven’t try it on android yet but its slow on both emulate or on device.

1 Like
2

I have the same behavior with BB10. I thought it because I was using a BB, but you confirm that iOS has the same issue.

3

Which version of ionic 2 are you using?

Right now with Ionic2 and Angular2 both being in beta, we can expect there to be some performance improvements as they mature.

Just some things to keep in mind

4

From my side, in Chrome, there is no issue, only on the phone. I know the BB10 is not supported, so maybe the issue is there. For my development, it is not a big deal. Eventually, I will be able to move to an Android or iPhone phone.

By the way, one of my friend that has an iPhone tried my app via Ionic View and told me that it was very slow. I understand it is in beta, but do you think it could be Ionic View that causing that slow transition?

5

This is the ionic info:
Cordova CLI: 6.0.0 Ionic Version: 2.0.0-beta.2 Ionic CLI Version: 2.0.0-beta.19 Ionic App Lib Version: 2.0.0-beta.9 ios-deploy version: 1.8.5 ios-sim version: 5.0.6 OS: Mac OS X El Capitan Node Version: v4.3.2 Xcode version: Xcode 7.2.1 Build version 7C1002

All I did was created 5 tabs with one side menu on the first tab and 2 to 3 segments on each tab. When I switch between tabs there are at least 500ms+ delay. On Segments, the first tap on segment is freeze for two seconds, then second times onward is you can see a small freeze which is 500ms delay consistently, if you tap between segments a few times, some time it freezes forever in that transition stage and you will need to tap again to activate that segment. The same things happens on both emulator and the actual device on the latest iOS.

6

Me too have the problem

Segment’s performance is not like tabs. tabs can animate smoothly on my iphone with ios9, but only 2 segments buttons can be unbearably slow, first click won’t fire sometime

There must be something wrong with it.

I opened a issue for this:

7

I have created a codepen for that:

8

I’m facing the same problem. If I have a list within segment, the scrolling is pretty slow

9

Hi,

I’ve expeireinced this and have been debugging and found that when switching between tabs, the constructor of the new page will have to run fully before the user gets any feedback which is the lag you see.
I tried using the lifecycle events and moved my constructor code there but it was still running all the entry lifecycle events (including the suggested ionViewDidLoad) before it starts giving the gui feedback.

My solution was to set a delay on the code from the nex component, this allowed the app to respond instantly.

The code I added in the ionViewDidEnter method:

    setTimeout(() => {
        //Your setup code HERE
    }, 100);

I also added some CSS to add a subtle animation to help that responsive feel:

ion-tab{
display: block;
transition: all 0.2s ease-in-out;
opacity: 0;
z-index: -1;
}

ion-tab.show-tab {
opacity: 1;
z-index: 1;
}

10

Hi guys,
I’m having real trouble getting the highlight effects of my ion-segment-tab element to run smoothly.
Has anyone had any luck?

Cheers.

11

Can you share your code for the pages in the tab

12

For the record, I just noticed the same behavior “slow ion-segment on iOS” and found a workaround I did document in issue https://github.com/ionic-team/ionic/issues/13740 (see my comment peterpeterparker)