fix(segment-view): prevent NaN/Infinity scrollRatio when a single content item is present (#31113)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently if there is a single content item present the `scrollRatio` is
computed as `NaN` or `Infinity` resulting in a console error.

<img width="833" height="434" alt="Screenshot 2026-05-05 at 1 42 51 PM"
src="https://github.com/user-attachments/assets/242975a5-d03f-4947-b740-0e6069de27b7"
/>

## What is the new behavior?
Updates `handleScroll` in `ion-segment-view` to skip `handleScroll` if
`max <= 0`
## Does this introduce a breaking change?

- [ ] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: OS-susmitabhowmik

core/src/components/segment-view/segment-view.tsx

@@ -47,6 +47,13 @@ export class SegmentView implements ComponentInterface {
   handleScroll(ev: Event) {
     const { scrollLeft, scrollWidth, clientWidth } = ev.target as HTMLElement;
     const max = scrollWidth - clientWidth;
+    // When only one content item is present max is 0 — skip to avoid NaN/Infinity scrollRatio.
+    // Still reset the timeout so isManualScroll isn't cleared prematurely if setContent
+    // started the timer and a stray scroll event arrives on a non-overflowing element.
+    if (max <= 0) {
+      this.resetScrollEndTimeout();
+      return;
+    }
     const scrollRatio = (isRTL(this.el) ? -1 : 1) * (scrollLeft / max);
 
     this.ionSegmentViewScroll.emit({

core/src/components/segment-view/test/basic/segment-view.e2e.ts

@@ -128,6 +128,37 @@ configs({ modes: ['md'] }).forEach(({ title, config }) => {
       await expect(segmentButton).toHaveClass(/segment-button-checked/);
     });
 
+    test('should not emit ionSegmentViewScroll with NaN or Infinity scrollRatio when only one content item is present', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-segment value="only">
+          <ion-segment-button content-id="only" value="only">
+            <ion-label>Only</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view>
+          <ion-segment-content id="only">Only</ion-segment-content>
+        </ion-segment-view>
+      `,
+        config
+      );
+
+      const ionSegmentViewScroll = await page.spyOnEvent('ionSegmentViewScroll');
+
+      // Programmatically dispatch a scroll event on the segment-view host element
+      // to simulate what the browser fires when scrollLeft changes.
+      await page.locator('ion-segment-view').evaluate((el: HTMLElement) => {
+        el.dispatchEvent(new Event('scroll', { bubbles: true }));
+      });
+
+      await page.waitForChanges();
+
+      // The max === 0 guard should prevent ionSegmentViewScroll from firing entirely.
+      expect(ionSegmentViewScroll).not.toHaveReceivedEvent();
+    });
+
     test('should set correct segment button as checked and show correct content when programmatically setting the segment value', async ({
       page,
     }) => {