Segments getting cut off in ion-nav on iOS

When running on an actual iPhone SE, my <ion-segment> is getting cut off so only the top half of the segment is showing.

Here is my code:

<ion-header>
  <ion-navbar>
    <ion-toolbar>
      <ion-segment [(ngModel)]="topTab" color="primary">
        <ion-segment-button value="points">
          Points
        </ion-segment-button>
        <ion-segment-button value="benefits">
          Benefits
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>
  </ion-navbar>
</ion-header>

I was also able to replicate this issue on an iPhone 7 emulator and an iPhone 7 Plus emulator. On Android, this is not an issue.

Does anyone have a fix for this?

What I’m going to do until I find a better way is remove the <ion-nav> and add a button in the toolbar for navigating back:

<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-only navPop>
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment [(ngModel)]="topTab" color="primary">
      <ion-segment-button value="points">
        Points
      </ion-segment-button>
      <ion-segment-button value="benefits">
        Benefits
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

Unfortunately this creates an inconsistent UI because all of the other pages say Back on iOS. If I change the button so that it is not icon-only and I add the text Back to the button, then part of that text gets overlapped by the segment.

37 PM

Hey hi all & @tvanzanten , for segement getting cut off on Ios

just add the below code to ion-segment-button

ion-segment-button {
–padding-start: 0px !important;
min-width: 20% !important; //this is line for andriod
max-width: 100% !important; //this line will work for IOS
opacity: inherit !important
}
Please add the above code for ion-segement-button
this issue will be fixed…