ionic-team / ionic-team/ionic-framework

bug: IonPopover renders off screen

Đang mở
#30,009 3 bình luận 1 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.