Ion-Segment Not Rendering Properly in MD Mode on iOS After Navigation

Ionic Framework Ionic Angular
1

Description:

I’m facing an issue with <ion-segment> when forcing md mode (mode="md") on an iOS device. The problem occurs when navigating back to the page containing the segment—it doesn’t render properly. The segment sometimes appears broken, invisible, or doesn’t reflect the selected value correctly.

What I Tried:

I have already tried the following, but none of them worked:
:heavy_check_mark: Forcing change detection using ChangeDetectorRef.detectChanges()
:heavy_check_mark: Using setTimeout to delay segment initialization
:heavy_check_mark: Wrapping <ion-segment> in ngIf or toggling hidden to force a reflow
:heavy_check_mark: Forcing a repaint by toggling display: none → display: block

Expected Behavior:

When I navigate back to the page, the <ion-segment> should render properly and reflect the correct selected value.

Issue Details:

  • Ionic Version: (Ionic 8)
  • Angular Version: (Angular 17)
  • Device: iPhone X / iOS 17 (any ios)
  • Mode: mode="md" (forced on iOS)

Question:

Has anyone faced this issue when using md mode on iOS? Is there an official workaround to make <ion-segment> render correctly after navigation?

Any help or insights would be greatly appreciated! :rocket: