Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(segment): prevent flickering for scrollable on iOS #29884

Merged
merged 2 commits into from
Sep 23, 2024
Merged

Conversation

thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Sep 19, 2024

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>

Copy link

vercel bot commented Sep 19, 2024

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

@github-actions github-actions bot added the package: core @ionic/core package label Sep 19, 2024
@thetaPC thetaPC changed the title fix(segment): prevent flickering for scrollable on IOS fix(segment): prevent flickering for scrollable on iOS Sep 19, 2024
Co-authored-by: rostislavcz <58735164+rostislavcz@users.noreply.github.com>
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix looks good! 👍

@thetaPC thetaPC added this pull request to the merge queue Sep 23, 2024
@thetaPC thetaPC removed this pull request from the merge queue due to a manual request Sep 23, 2024
Copy link
Member

@tanner-reits tanner-reits left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix looks good!

@thetaPC thetaPC added this pull request to the merge queue Sep 23, 2024
Merged via the queue into main with commit 078ed0b Sep 23, 2024
61 checks passed
@thetaPC thetaPC deleted the ROU-10981 branch September 23, 2024 17:45
@ZanogeaDumitru
Copy link

Solving this problem itself caused another problem.
Now the ion-segment no longer flicks but if a button is physically located halfway outside the view it is no longer scrolled to the center, or inside the view (when selected) if it is the last element. With a few clicks on the elements just nearby it resumes but if you try the click again when it is outside it presents the same problem again.

@thetaPC
Copy link
Contributor Author

thetaPC commented Oct 9, 2024

Hello @ZanogeaDumitru! Please open a new issue with a repro so we can look at it as soon as possible. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: ion-segment scrollable IOS animation bug
4 participants