bug: IonPopover renders off screen

[iAMkVIN-S]

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

I have an <IonPopover /> within a <IonHeader/>/<IonToolbar /> that opens sometimes in the proper position and sometimes off canvas.

It does not seem related to where the click is from, and I have tried all the combinations of Reference, Side, Alignment and Offset. The only consistent behavior is that in all cases, in alternates between on-screen and off-screen every other open.

On screen:

Off screen:

This happens on ionic serve and iOS/Android builds.

Current code for readability:

Current code for SEO:

<IonPage id="main-content">
    <IonHeader>
        <IonToolbar className="page-toolbar">
            <MobileHamburgerButton />
            <IonTitle>{title}</IonTitle>
            <IonButton fill="clear" slot="end" id="popover-button">
                {meatballsMenu && <IonImg className="menu__meatballs" src={meatballs} />}
            </IonButton>
            <IonPopover dismissOnSelect trigger="popover-button" triggerAction="click" className="ionPopover-width">
                <IonContent>
                    <IonList>
                        {meatballsMenu &&
                            meatballsMenu.map((m, i) => (
                                <IonItem key={i} button={true} detail={false} onClick={() => m.action}>
                                    <IonLabel>{m.label}</IonLabel>
                                    <IonThumbnail slot="end">
                                        <IonImg src={m.icon}></IonImg>
                                    </IonThumbnail>
                                </IonItem>
                            ))}
                    </IonList>
                </IonContent>
            </IonPopover>
        </IonToolbar>
    </IonHeader>
    <IonContent className="mainLayout ion-padding">{children}</IonContent>
</IonPage>

Expected Behavior

The <IonPopover /> should open in a consitent location and not be off canvas.

Steps to Reproduce

1. Use inline Popovers as shown above
2. Make the trigger an icon within a toolbar on the edge of the screen
3. Popover randomly opens in two alternative positions (1 on screen, 1 off screen)

Even if I try all the combinations of Reference, Side, Alignment and Offset - The popover will slightly change position, but will continue to alternate between two positions rather than rendering consistently.

Code Reproduction URL

http://localhost:8100/

Ionic Info

Ionic:

Ionic CLI : 7.0.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.3.3

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

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

[expcapitaldev]

the same issue, any updates here?