ionic-team / ionic-team/ionic-framework

bug: IonPopover renders off screen

Abierto
#30,009 3 comentarios 1 reacción 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.