Tab bar rendering problem



I’m using the element with three tabs but there’s a strange lighter colored block on top of the left most tab. If I widen the screen, the underlying tab icon appears to the right but the colored block remains. It’s really weird and looks like some CSS rendering issue. I tried different tab styles, like tab-default, tab-calm, etc. But they all have this issue. See image below for an example of this issue.

Anyone have an idea what’s wrong?



Actually this issue should not occur. There might be something which we will understand if we look at the code. Could you please share a codepen or plunker if possible? And also let me know is this issue happening in the real devices too?


Hi there,

Actually, I was just walking through chapter 5 of the Ionic in Action book. If you checkout the project

git clone
cd chapter5
git checkout -f step1

you should have the exact same setup as I have. Then insert the following code in your www/index.html:

<body ng-app="App">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-chevron-left"></i> Back

Then the following code in your www/js/app.js:

angular.module('App', ['ionic'])
  .config(function ($stateProvider, $urlRouterProvider) {
      .state('tabs', {
        url: '/tabs',
        templateUrl: 'views/tabs/tabs.html'

And the following code in a file www/views/tabs/tabs.html:

<ion-tabs class="tabs-icon-top tabs-positive">
  <ion-tab title="Rates" icon-on="ion-social-bitcoin" icon-off="ion-social-bitcoin-outline">
  <ion-tab title="History" icon-on="ion-ios-analytics" icon-off="ion-ios-analytics-outline">
  <ion-tab title="Currencies" icon-on="ion-ios-cog" icon-off="ion-ios-cog-outline">

Finally, run ionic serve and you should get the tab rendering problem.

Hope this helps!



You can try starting the app with tabs template. There you don’t get these issues for sure. I was been using that for few apps.


Ok, I’ll definitely try that!