ionic-team / ionic-team/ionic-framework

bug: IonPopover renders off screen

Open
#30,009 3 comments 1 reaction 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

I have an `` within a `/` 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:
image

Off screen:
image

This happens on `ionic serve` and iOS/Android builds.

Current code for readability:

image

Current code for SEO:
```




{title}

{meatballsMenu && }




{meatballsMenu &&
meatballsMenu.map((m, i) => (
m.action}>
{m.label}




))}





{children}

```

### Expected Behavior

The `` 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.