Tab Icon Jumps

ionic-v1
1

I’ve got a problem that is driving me crazy. I’m using a tab bar (icons only) and in the simulator or while running on the device with iOS my tab icons (ionicons) are jumping when switching between tabs. It looks like for a split second there’s the current icon with the same icon a few pixel below it (you can just see the top 1/5th of the icon below it for a split second).

Strangely, I have four tabs and only the first two do that, and only if they are the tabs being switched to/from.

2

Have you edited something in the CSS?

I was playing with the CSS a while ago, and encountered the same problem as you… If so, you could try disabling all custom css and see if it still happens

3

I’ve removed any custom CSS and I still have the same problem. As a matter of fact, I just tried using ‘ionic start testApp tabs’ and sent it straight to Ionic View with the same problem.

4

hi, i got save problem on ios.
i also download ‘ionic start myapp tabs’ to test
but when i click the bar icon
it will jump to btm then jump back

5

I’m seeing the same behavior, icons just jumping. In my case, all tab icons jump, including those in the bottom and top, even those not linking to new route. I tried to remove all app CSS, only retained Ionic CSS but the issue still appears. Very strange.

6

I recorded the issue in this clip: http://jmp.sh/0A5ql5d

7

Yep, that’s exactly what I’m seeing!

8

me too,
any solution?

9

hi,
i think ionic will remove tab icon and then add it again
so maybe some mobile not fast enough to display.
then we see the icon jump.

my noob solution:
edit lib/ionic/js/ionic.bundle.js go to line around 58901
replace template

template:
'<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
  ' ng-disabled="disabled()" class="tab-item">' +
  '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
  '<i class="icon {{getIconOn()}}" ></i>' +
  '<span class="tab-title" ng-bind-html="title"></span>' +
'</a>',
10

I’m not using different icons for the on and off states, so this works for me for the time being!

I’ve noticed the same issue using both a Nexus 6 and an iPhone 6s+, so I can’t believe it’s due to the devices not having enough processing power to swap out the icons without the jumping.

Maybe it’s always been there and I’ve just never noticed it before.

11

Yeah, the problem is with ng-if to show/hide icon. I’ve changed to ng-show but the issue remains. Funny thing is there are many places using ng-if and ng-show without the problem. I looked for transition delay, which is usually the source of such problems in AngularJS but couldn’t find any use of such.

Anyway, if you use the same icon for both states and don’t want to modify ionic source, just include this patch somewhere in your code. (If you don’t use ES2015, just replace the templated string and const declaration.)

angular
  .module('ionic')
  .config(['$provide', function ($provide) {
    $provide.decorator('ionTabNavDirective', ['$delegate', function ($delegate) {
      const directive = $delegate[0]

      directive.template = 
        `<a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}"
            ng-disabled="disabled()" class="tab-item">
          <span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>
          <i class="icon {{getIconOn()}}"></i>
          <span class="tab-title" ng-bind-html="title"></span>
        </a>`

      return $delegate
    }])
  }])
1 Like
12

Thank you buunguyen for this solution :slightly_smiling:

i just make some changes :

angular.module('ionic').config(['$provide', function ($provide) { $provide.decorator('ionTabNavDirective', ['$delegate', function ($delegate) { const directive = $delegate[0]; directive.template = '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' + ' ng-disabled="disabled()" class="tab-item">' + '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' + '<i class="icon" ng-class="{true: getIconOn(), false: getIconOff()}[isTabActive()]"></i>' + '<span class="tab-title" ng-bind-html="title"></span>' + '</a>'; return $delegate; } ]) } ]);