fix(segment): prevent flickering for scrollable on iOS

[thetaPC]

Issue number: resolves #29523

---

What is the current behavior?

The scrollable segment flickers on iOS physical devices or simulators when the active button is near the edge of the screen. The jump is due to the button being scrolled to the center and snaps back to the edge since the button was scrolled past the container.

What is the new behavior?

• Switched to scrollTo provides for a smoother transition.
• Gave co author credit to the original reporter since they provided part of the solution
• No new tests were created since functionality stays the same and testing on Playwright would be impossible to recreate

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.3.2-dev.11726779768.16e1f1d2

How to test:

1. Create a new app through any starter
2. Add a scrollable segment with at least 6 buttons (code snippet example below)
3. Recommended to change the segment mode to md since it's easier to see the flicker
4. Build the app and open it in an iOS or simulator (if more instructions on how to do this is needed, reach out to me)
5. Click on the third button
6. Click on the first button
7. Notice the flicker
8. Click over to the third to last button
9. Click on either the last two buttons
10. Notice the flicker
11. Install the dev build
12. Verify the load does not flicker
13. Repeat steps 4 and 5
14. Verify the flicker is no longer there
15. Repeat steps 7 and 8
16. Verify the flicker is no longer there

<ion-segment value="2" scrollable="true" mode="md">
  <ion-segment-button value="1">
    <ion-label>Button 1</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Button 2</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Button 3</ion-label>
  </ion-segment-button>
  <ion-segment-button value="4">
    <ion-label>Button 4</ion-label>
  </ion-segment-button>
  <ion-segment-button value="5">
    <ion-label>Button 5</ion-label>
  </ion-segment-button>
  <ion-segment-button value="6">
    <ion-label>Button 6</ion-label>
  </ion-segment-button>
</ion-segment>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 19, 2024 8:53pm