3

I develop a mobile web app with Ionic Framework.

When I was using ionic beta-13 with angular 1.3.0, the ng-show worked fine. But after the update to ionic beta-14 with angular 1.3.6, on Safari browser the element started to blink when I navigate between views. It works fine on Chrome.

UDPDATE

I made a codepen version of my issue. The transition between tabs in Safari is jumpy (because of the hidden text), while in Chrome it works as expected.

JS:

angular.module('starter', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider


  .state('menu', {
  url: '/menu',
  abstract: true,
  templateUrl: "templates/menu.html"
})
  .state('menu.tabs', {
    url: '/tabs',
    templateUrl: 'templates/tabs.html',
    abstract: true
  })

  .state('menu.tabs.first', {
    url: '/first',
    views: {
      'first-tab': {
        templateUrl: 'templates/first.html',
      }
    },
  })

  .state('menu.tabs.second', {
    url: '/second',
    views: {
      'second-tab': {
        templateUrl: 'templates/second.html',
      }
    },
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('menu/tabs/first');

});

HTML:

<html ng-app="starter">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Side Menus</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

   <script id="templates/menu.html" type="text/ng-template">

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-calm">
            <ion-nav-back-button></ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button menu-toggle="left" class="button button-icon icon ion-navicon">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view>
        </ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-header-bar class="bar-royal">
            <h1 class="title">MENU</h1>
        </ion-header-bar>
        <ion-content>
            <ion-scroll style="height: 100%">
                    <a nav-clear menu-close ui-sref="menu.tabs.first" class="item item-icon-left">
                        <i class="icon ion-calculator"></i>
                        {{ Tabs }}
                    </a>
                </ul>
            </ion-scroll>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
    </script>  

     <script id="templates/tabs.html" type="text/ng-template">
       <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="First"
             icon="ion-home"
             ui-sref="menu.tabs.first">
        <ion-nav-view name="first-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Debts"
             icon="ion-compose"
             ui-sref="menu.tabs.second">
        <ion-nav-view name="second-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

  </script>


     <script id="templates/first.html" type="text/ng-template">
       <ion-view cache-view="false">
    <div class="bar bar-subheader">
        <h2 class="title calm">First</h2>
    </div>
    <ion-content class="has-header has-subheader" >
        <div ng-show=false>
            Hidden text 1
        </div>
        unhidden text 1
    </ion-content>
</ion-view>

       </script>

       <script id="templates/second.html" type="text/ng-template">
         <ion-view cache-view="false">
    <div class="bar bar-subheader">
        <h2 class="title calm">Second</h2>
    </div>
    <ion-content class="has-header has-subheader" >
        <div ng-show=false>
            Hidden text two
        </div>
        unhidden text two
    </ion-content>
</ion-view>

  </script>
  </body>
</html>
scniro
  • 16,844
  • 8
  • 62
  • 106
leonprou
  • 4,638
  • 3
  • 21
  • 27

3 Answers3

3

Change your ng-show directive to ng-if="false" that will not show flickering appearance

first.html

<ion-content class="has-header has-subheader" >
    <div ng-if="false">
        Hidden text 1
    </div>
    unhidden text 1
</ion-content>

second.html

<ion-content class="has-header has-subheader" >
    <div ng-if="false">
        Hidden text two
    </div>
    unhidden text two
</ion-content>

Codepen

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Yes, it is working. But I want to know what's broke the code that work before. Maybe it's a performance issue and I should use ng-if. But sometimes ng-show is more appropriate. – leonprou Mar 07 '15 at 21:13
  • @leonprou using `ng-if` can't affect on performance..but me too really don't know why safari is behaving wiered like this..the disadvantage behind using `ng-if` is, it will create child scope inside the element where it applied, may lead you to use `$parent` notation to refer parent scope – Pankaj Parkar Mar 07 '15 at 21:16
2

I had a similar issue with safari.

Instead of ngShow, I used ng-class="{hidden: myCondition}" with .hidden { display: none; } in CSS.

It seems to solve the issue.

Qi CHEN
  • 49
  • 4
0

When the initialization code, ng-show expression may detect many times, for example, from undefined to true or false.

I guess may be because of this reason, cause inside the ng-show element will render times.

You can check the code, try to give expressions to set an initial value, or add the animate to the ng-show.

yisbug
  • 9
  • 1