Gulir horizontal bilah alat tidak berfungsi di Seluler

Saya sedang membangun aplikasi ionik, di mana saya menambahkan toolbar di dalam header dan memiliki 5 tombol untuk bernavigasi. tetapi ketika saya mencoba kode pada perangkat browser, gulir horizontal berfungsi dengan baik untuk toolbar tetapi di perangkat sebenarnya, itu tidak akan berfungsi dengan baik. terkadang bergulir dan terkadang tidak. Di bawah ini adalah kode yang sama.

<ion-header>
  <ion-navbar color="light">
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button icon-only>
        <ion-icon name="cart"></ion-icon> 
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar color="light">
    <ion-buttons>
      <button ion-button clear>{{'All'|translate}}</button>
    </ion-buttons>
    <ion-buttons *ngFor="let facet of parentCategories">
      <button ion-button [ngClass]=" {'active' : selectedFacet == facet}">{{facet}}
      </button>
      <button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet"><ion-icon name="ios-arrow-down"></ion-icon></button>
    </ion-buttons>
    <div id="sub-category" class="sub-category">
      <ion-buttons *ngFor="let subFacet of childCategories">
        <button ion-button [ngClass]=" {'active' : selectedSubFacet == subFacet}" (tap)="getFilteredProducts('categoryFacet',subFacetMap.get(subFacet), selectedFacet, subFacet)">
          {{subFacet}}</button>
      </ion-buttons>
    </div>
  </ion-toolbar>
</ion-header>

css:

.toolbar-content {
     overflow-x: auto;
     white-space: nowrap;
     overflow-y: hidden;
     width: 100%;
     height: 56px;
}