Angular variables (super short) visible in side menu on iOS 7.1 since nightly-1712

[rvanbaalen]

On an iPhone 4, I get to see the original Angular binding variables (e.g. {{ menuItemLabel }}) when the side menu is closing.

This didn't happen before and my app didn't change so I'm assuming its something being caused by a recent release on the master branch.

When clicking a menu item, I'm updating the state. Are there many calculations going on lately which are affecting the performance on older devices? On an iPhone 5 or Galaxy S3 / S4 the performance is pretty good. I can only reproduce this on an iPhone 4.

Update

This issue is reproducible on both an iPhone 4 and 5 running iOS 7.1 and has been around starting from nightly-1712

[ajoslin]

Hi rvanbaalen!

What version of ios is the iPhone 4 running?

[rvanbaalen]

@ajoslin iOS 7.1 & Ionic nightly

[rvanbaalen]

This issue is happening on all iOS devices. Not only iPhone 4. It's just performing very poorly lately which is causing the flickering of these 'binding variables' (or whatever they are called).

[ajoslin]

What kind of markup are you using to make it lag? In my tests, it seems to be performing well. Is your performance bottleneck elsewhere? are you doing any dom manipulation or changes when the side menu changes?

[rvanbaalen]

One of the heaviest pages I have in my app is the one with a leaflet map in it. It has a structure like this:

• Ionic side menus
  • Ionic side menu content
    • Ionic tabs
      • Ionic tab content
        • Header
        • Map
      • Ionic tab bar (footer)

In other words: it's a map in a tab and the tabs in a side menu content area with left and right menus.

The loading of the Leaflet map has some heavy impact on the apps performance (map starts initialising while the side menu is still animating the close event) but this was never ān issue before. On the iPhone 4 it's somewhat acceptable that things are running a little slow but I never saw these variables showing anywhere before I installed the latest nightly build.

I must add that I'm seeing the plain text variables only in my side menu when it's closing. The menu item labels and ui-sref locations are loaded from an array in my controller and all labels are translated using angular-translate

For instance this is one of my menu items:

<a 
    class="item" 
    ng-class="{
        'item-avatar nw-avatar': menuItem.iconSrc, 
        'active': isActive(menuItem.sref)
    }"
    ng-repeat='menuItem in menuItems'
    ui-sref="{{ menuItem.sref }}"
    menu-close>
    <img 
        ng-src="images/icons/nw-menu-{{ menuItem.iconSrc }}.png" 
        ng-if="menuItem.iconSrc"/>
    {{ menuItem.label | translate }}
</a>

And this is a part of the menu item array in my controller's scope:

$scope.menuItems = [
    {
        label: 'MENU.PROFILE',
        sref: 'main.profile',
        iconSrc: 'profile'
    }
];

Hope this helps

[rvanbaalen]

@ajoslin I've done some extensive testing today on this issue and my conclusion is that this 'flickering' started with nightly-1712. When I install nightly-1711, everything (regarding this issue, that is) is working fine on both my iPhone 4 and iPhone 5 (iOS 7.1).

Care to shed some light on what happend between those two releases? From what I've read on the interwebz this issue can be triggered by a faulty digest cycle in Angular. For example it seems to be bad practice to use $timeout() to force a digest cycle but I couldn't find any traces of such code in Ionic. Actually; just 1 time. But that wasn't related to my issue.

[ajoslin]

Hi @rvanbaalen.

Sorry for slow responses, we've all been in our caves working on specific features (I've been working on virtual scroll).

nightly-1712 is when we implemented the tap/touch refactor.

However, things showing up uncompiled sounds like a very unrelated problem. Interesting ...

Could you post your side menus' whole markup?

[rvanbaalen]

It's ok, the slow response. I've been able to get an acceptable working version of Ionic now so I'm happy! I just needed to implement the ugly hack mentioned here #1137 (comment) to get taps on map markers working.

For now I'm just going to stick to nightly-1711 for the production release of my app.

I hope this bug report and the pin-pointing to nightly-1712 helps in the future debugging and reproduction of this issue 👍

[ajoslin]

I'm glad you have a stable release! I hope your app does exceedingly well.

[rvanbaalen]

@ajoslin Unfortunately it's an app for our client's members (requiring a username and password) otherwise I would have shared it when it launches in the app stores (Android and iOS)

[ajoslin]

I still can't reproduce this.

When you have a sec, could you post your full markup?

Thanks =)

[ajoslin]

Closing for now.

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