bug: rendering issue with ion-segment on iOS

[trytuna]

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

After updating my app to "Ionic 7", I encountered a bug in "ion-segment": say you have a page with an ion-segment with 5 segments and the third is pre-selected through the [(ngModel)] or [value] binding. In addition to the value bindings [scrollable]="true" is also set (scrollable is actually used in my real application). Then if you navigate into this page it takes a moment to render the ion-segment component at the correct position.

As far as I can tell this bug is only reproducible on iOS (Simulator or Device). It's reproducible in Safari on my desktop computer but not in Chrome.

I've made a short clip to see the bug in action and also made the code to reproduce it available.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-10-18.at.11.58.29.mp4

https://github.com/trytuna/IonicSegmentBug

Expected Behavior

Should render without any visual glitches

Steps to Reproduce

1. git clone https://github.com/trytuna/IonicSegmentBug
2. cd IonicSegmentBug
3. npm install
4. ionic build
5. npx cap sync ios
6. npx cap open ios
7. run it on an iPhone (e.g. 15 Pro iOS 17.0)
8. Navigate into the page with the bug by clicking on the blue "Bug"-Button

Code Reproduction URL

https://github.com/trytuna/IonicSegmentBug

Ionic Info

% ionic info
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - /Users/timo/.nvm/versions/node/v16.17.1/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/timo/.nvm/versions/node/v16.17.1/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/timo/.nvm/versions/node/v16.17.1/lib/node_modules/@ionic/cli/index.js
   - /Users/timo/.nvm/versions/node/v16.17.1/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.1 (/Users/timo/.nvm/versions/node/v16.17.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.5.0
@angular-devkit/build-angular : 16.2.6
@angular-devkit/schematics : 16.2.6
@angular/cli : 16.2.6
@ionic/angular-toolkit : 9.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v16.17.1 (/Users/timo/.nvm/versions/node/v16.17.1/bin/node)
npm : 9.8.0
OS : macOS Unknown

Additional Information

No response

[trytuna]

I dug a bit deeper and found out that this bug was just recently in version 7.4.4 introduced. I've tested v7.4.3 and it's fine.

v7.4.3...v7.4.4-nightly.20231005

[trytuna]

My suspicion is that raf() is waiting for the navigation animation to finish and just after this animation is done the buttons slide into view. I've created a branch that disables the navigation animation and VOILÀ - the issue went away...

https://github.com/trytuna/IonicSegmentBug/tree/no-animation

[liamdebeasi]

Thanks for the report. I can reproduce the reported behavior. While this is not an Ionic regression (since Ionic's code is doing what it should), it does look like we uncovered a WebKit bug. I'll take a closer look and see if there's a workaround we can implement.

[liamdebeasi]

It looks like our usage of scrollIntoView is where the WebKit bug is. Using scrollTo does not have the same behavior.

Can you give this dev build a try and let me know if it resolves the issue in your app?

npm install @ionic/angular@7.5.2-dev.11697638908.1f04980a

[trytuna]

Works like a charm! That was super quick. Thank you so much!

I've tested it on iOS and Android both seem fine at first glance

[liamdebeasi]

Thanks for the issue. This has been resolved via #28376, and a fix will be available in an upcoming release of Ionic Framework.