bug: iOS/Safari: Swipeable second segment view not loading as default despite being selected

[themalikx]

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

v8.x

Current Behavior

I'm trying to load the second segment view as the default when the screen appears. However, on iOS, the first segment view keeps showing even though the second segment button is already selected.

I'm attaching the relevant code below. I believe this might be a bug.
Has anyone else encountered the same issue?

Expected Behavior

It should show the second segment by default when loading the page.

Steps to Reproduce

Write this code in ngModule based project and simply run it.
already have assigned the ### value="second"

<ion-segment value="second"> <ion-segment-button value="first" content-id="first"> <ion-label>First</ion-label> </ion-segment-button> <ion-segment-button value="second" content-id="second"> <ion-label>Second</ion-label> </ion-segment-button> <ion-segment-button value="third" content-id="third"> <ion-label>Third</ion-label> </ion-segment-button> </ion-segment> <ion-segment-view> <ion-segment-content id="first">First</ion-segment-content> <ion-segment-content id="second">Second</ion-segment-content> <ion-segment-content id="third">Third</ion-segment-content> </ion-segment-view>

Code Reproduction Repo URL

https://github.com/themalikx/Safari-IOS-Bug-in-Swipeable-Segment/tree/master
Run npm i -f
Open the app in Safari or build it for IOS Try to refresh the page to see this bug in UI. Segment view and segment button is not matching on load

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/macos/.nvm/versions/node/v23.1.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.3
@angular-devkit/build-angular : 19.1.8
@angular-devkit/schematics : 19.1.8
@angular/cli : 19.1.8
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 7.0.1
@capacitor/android : 7.0.1
@capacitor/core : 7.0.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v23.1.0 (/Users/macos/.nvm/versions/node/v23.1.0/bin/node)
npm : 10.9.0
OS : macOS Unknown

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[themalikx]

@Ionitron @gnbm I have added the reproduction repo URL. Check that out please.

[brandyscarney]

Thanks for the reproduction! I believe the fix I'm currently working on for a different issue also fixes the one you're seeing: #30547

It appears to be working with my dev build, but I'm not sure if I fixed it or it is just working intermittently. Could you try it out and let me know if it resolves the issue for you?

npm i @ionic/angular@8.6.2-dev.11752524287.1d61cd78

[themalikx]

@brandyscarney Yes, it is resolved in @ionic/angular@8.6.2
Thank you

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.