bug: Ion-Segment has layout error in Ion-Content with ion-padding

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Ion-Segment has layout error in Ion-Content with ion-padding, it's nomarl on web and Simulator, but has layout error on device like below shows.

eg1: In Ion-Content with ion-padding, covered by Ion-Content on the left and right

Expected Behavior

Ion-Segment has right layout on device like this:

Steps to Reproduce

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>signup</ion-title>
    <ion-segment value="default">
      <ion-segment-button value="default">
        <ion-label>默认</ion-label>
      </ion-segment-button>
      <ion-segment-button value="terrain">
        <ion-label>地形</ion-label>
      </ion-segment-button>
      <ion-segment-button value="satellite">
        <ion-label>影像</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3d">
        <ion-label>3D</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">signup</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-searchbar search-icon="./../../assets/img/search.svg" color="light" animated="true" placeholder="搜索地名、地址"></ion-searchbar>
  <ion-label class="ion-padding-horizontal"><h2>地图显示</h2></ion-label>
  <ion-segment value="default">
    <ion-segment-button value="default">
      <ion-label>默认</ion-label>
    </ion-segment-button>
    <ion-segment-button value="terrain">
      <ion-label>地形</ion-label>
    </ion-segment-button>
    <ion-segment-button value="satellite">
      <ion-label>影像</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3d">
      <ion-label>3D</ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-label class="ion-padding-horizontal"><h2>地图显示</h2></ion-label>
</ion-content>

Code Reproduction URL

https://github.com/dythbj/segment/blob/main/src/app/tab1/tab1.page.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.2.0 @angular-devkit/build-angular : 17.3.8 @angular-devkit/schematics : 17.3.8 @angular/cli : 17.3.8 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/android : 6.0.0 @capacitor/core : 6.0.0 @capacitor/ios : 6.0.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.14.0 (/usr/local/bin/node) npm : 10.7.0 OS : macOS Sonoma 14.5

Additional Information

It's nomarl on web and Simulator, but has error on device, so i cann't give Reproduction Url.