Partial border with iOs in the Ionic app

Question

At my company, we are creating the Ionic3 application. On one of the pages we show the ranking on several tabs (each tab shows a different rating), and the way to display the active tab is to set another border-bottomfor the title of the active tab.

This works fine on Android devices, but on iOs devices, if part of the tab title is disabled (it has a property of the property overflow-x: scroll;), this part does not get a border when scrolling. Better explained with the image:

I tried looking at the forums and the stack, but I did not see anyone with the same problem or similar. Any idea?

Just in case, here is the view code:

<back-button></back-button>

<ion-content>

    <login-image></login-image>

    <div>
        <h1>{{'LOGIN.TITLE' | translate }}</h1>
        <h2>{{'LOGIN.SUBTITLE' | translate}}</h2>
    </div>

  <form class="form" [formGroup]="loginForm">

    <ion-item>
      <ion-label>
        <ion-icon name="ios-mail-outline"></ion-icon>
      </ion-label>
      <ion-input type="text" autocapitalize="off" formControlName="mail" placeholder="{{ 'LOGIN.MAIL' | translate }}"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>
        <ion-icon name="key"></ion-icon>
      </ion-label>
      <ion-input type="{{visible? 'text' : 'password'}}" formControlName="password" placeholder="{{'LOGIN.PASSWORD' | translate}}"></ion-input>
      <span class="eyeButton" item-right (click)="changeVisibility()">
        <ion-icon name="{{visible? 'eye': 'eye-off'}}"></ion-icon>
      </span>
    </ion-item>

    <div class="terms">
      <label class="switch">
        <input type="checkbox" formControlName="termsAccepted">
        <span class="slider"></span>
      </label>

      <p (click)="showTerms()" [innerHtml]="'REGISTRATION.TERMS' | translate "></p>
    </div>

    <div class="bottom">
      <a class="passLink" (click)="goToChangePass()" track-event [event]="'loginpage_gotochangepass'">{{'LOGIN.PASSLINK' | translate}}</a>
      <button (click)="doLogin(loginForm)" [ngClass]="{'disabled': loginForm.invalid}" class="formButton" type="button" track-event [event]="'loginpage_dologin'">{{'LOGIN.NEXT' | translate}}</button>
    </div>

  </form>

</ion-content>

Answer 1

,

<ion-header no-border>
  <ion-navbar no-border>
    <ion-buttons left>
      <button ion-button>
        Left
      </button>
    <ion-buttons>
      <ion-title></ion-title>
    <ion-buttons end>
      <button ion-button>
        Right
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
</ion-content>

android ios

, .