Ionic tab not get correctly rendered on Android?

Question

Every thing is working fine on iOS platform. why does this tab not get correctly rendered on Android?

I want to use side menu + tab design.

Issues are:

• Tabs header are partially visible.
• Unwanted spacing between tabs header and embedded child view.

My system information:

• Cordova CLI: 6.4.0
• Gulp version: CLI version 3.9.1
• Gulp local: Local version 3.9.1
• Ionic Framework Version: 1.3.1
• Ionic CLI Version: 2.1.1
• Ionic App Lib Version: 2.1.1
• ios-deploy version: 1.9.0
• ios-sim version: 5.0.8
• OS: Mac OS X Sierra Node Version: v6.2.1

---

Please check the image below, you can clearly see the difference in both platform.

sidemenu:

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <ion-nav-bar class="bar-stable clsMenu">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left" ng-controller="sideMenuCtrl">
    <ion-header-bar class="bar-stable" style="background-color:#E0E0E0">

        <img src="img/menu-top.png" />
    </ion-header-bar>
    <ion-content overflow-scroll="false">
        <ion-list>

            <ion-item menu-close href="#/app/tab">
                <i class="icon ion-help-circled"></i> Search
            </ion-item>

        </ion-list>
    </ion-content>
</ion-side-menu>

State:

  .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/side-menu/menu.html'
        })
        // Tabs        
        .state('app.tab', {
            url: '/tab',
            views: {
                'menuContent': {
                    templateUrl: 'templates/search/tabs.html'
                }
            }
        })
        .state('app.tab.searchById', {
            url: '/searchById',
            views: {
                'search-by-id-tab': {
                    templateUrl: 'templates/search/searchById.html',
                    controller: 'searchCtrl'
                }
            }
        })
        .state('app.tab.advanceSearch', {
            url: '/advanceSearch',
            views: {
                'advance-search-tab': {
                    templateUrl: 'templates/search/advanceSearch.html',
                    controller: 'searchCtrl'
                }
            }
        })

tabs.html

<ion-tabs class=" tabs-color-active-calm tabs-stable">
    <ion-tab title="search By ID" ui-sref="app.tab.searchById">
        <ion-nav-view name="search-by-id-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Advance Search" ui-sref="app.tab.advanceSearch">
        <ion-nav-view name="advance-search-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Answer 1

Found the culprit

  .tabs-top > .tabs, .tabs.tabs-top {
      top: 0px;}

The above css class in style.css will caused the problem on android devices.