bug: Opening and closing IonSelect crashes Chrome (Aw, Snap!)

[vs-jdefting]

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

v8.x

Current Behavior

When I open and close an IonSelect nested in an IonHeader, chrome crashes with an "Aw, Snap!". This issue seems to be specific to the arm64 build of Chrome on Apple Silicon. Chrome does not crash on Intel chips.

• Chrome version: Version 131.0.6778.140 (Official Build) (arm64)
• Computer: Apple MacBook M2 Max (macOS 14.2.1 (23C71))

    <IonApp>
      <IonPage>
        <IonHeader>
          <IonSelect label="Open then close me"></IonSelect>
        </IonHeader>
        <IonContent>some content</IonContent>
      </IonPage>
    </IonApp>

Expected Behavior

Opening and closing IonSelect does not crash the webpage.

Steps to Reproduce

0. Be on an Apple Silicon M1/M2/M3 computer
1. Go to https://stackblitz.com/edit/s31z8pdq-rmne6pwu?file=src%2Findex.tsx
2. Click "Open then close me"
3. Close the modal
4. The page should crash

Screen.Recording.2024-12-13.at.4.10.55.PM.mov

Code Reproduction URL

https://stackblitz.com/edit/s31z8pdq-rmne6pwu?file=src%2Findex.tsx

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/jdefting/Library/pnpm/global/5/.pnpm/@Ionic[email protected]/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.1 (/Users/jdefting/visiostack/vs/frontends/infra-frontend/node_modules/.pnpm/@Ionic[email protected][email protected][email protected][email protected]/node_modules/@ionic/react)

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2 (/Users/jdefting/visiostack/vs/frontends/infra-frontend/node_modules/.pnpm/@capacitor+android@6.1.2_@capacitor[email protected]/node_modules/@capacitor/android)
@capacitor/core : 6.1.2 (/Users/jdefting/visiostack/vs/frontends/infra-frontend/node_modules/.pnpm/@capacitor[email protected]/node_modules/@capacitor/core)
@capacitor/ios : 6.1.2 (/Users/jdefting/visiostack/vs/frontends/infra-frontend/node_modules/.pnpm/@capacitor+ios@6.1.2_@capacitor[email protected]/node_modules/@capacitor/ios)

Utility:

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

System:

NodeJS : v18.19.0 (/Users/jdefting/.nvm/versions/node/v18.19.0/bin/node)
npm : 10.2.3
OS : macOS Unknown

Additional Information

No response

[dgreasi]

I am experiencing the same issue only in particular browsers and OS.

The crash occurs when the select modal is being dismiss (either by selecting an option or dismissing)

I am using the following in my code:

<IonSelect
  className="flex-center-center-column-nowrap padding-l-16"
  shape="round"
  color="light"
  interface="action-sheet"
  value={language.value}
  cancelText={t('SHARED.CANCEL')}
  onIonChange={onChange}>
  {getSelectOptions()}
</IonSelect>

Result:

I can replicate it consistently in:

• Brave - macOS
• Chrome - macOS

I was unable to replicate the crash in the following browsers/OS:

• Firefox - macOS
• Safari - macOS
• Safari - iOS
• Firefox - Ubuntu
• Brave - Ubuntu
• Chrome - Ubuntu
• Brave - Android
• Chrome - Android
• Chrome - Windows

So I guess it's specific to macOS with arm CPU (Mac Studio M2 Max)

I have tested if the behaviour changes if the value of interface is different but I got the same crash.

My environment:

"@ionic/react": "^7.0.0",
"@ionic/react-router": "^7.0.0",

Node: v18.18.2
OS : macOS 15.1.1

It my have something to do with the css being used in this component. Found this.