bug: popover positioning does not properly account for safe area

[NLueg]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The positioning of popovers should include the safe area of the device. At least it should be possible to add it manually w

Describe the Use Case

On devices with safe areas, it can appear, that the select popover overflows the content of the safe area. This is an unwanted behavior and it at least should be possible to determine whether the popover opens to the bottom or top to add the safe area margin manually.

In the screenshot you can see what happens when I add a large safe area:

The button below the popover has the safe-area while the popover overflows the safe area.

Describe Preferred Solution

Add a CSS class based on originY to add specific margins for the safe area based on the current position.

Describe Alternatives

Handle the safe area directly inside the framework like the left property.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[NLueg]

Hey, I just created an example application: https://github.com/NLueg/ionic-popover-safe-area-issue

[averyjohnston]

Thanks! This is a bug we should fix. It looks like it applies to all popovers, not just ones from ion-select.

The utility that adjusts the popover's position to not overflow the window does not seem to account for top or bottom safe area: https://github.com/ionic-team/ionic-framework/blob/dc94ae01fe9e6c1b570559f0c8308b31e96cc5bf/core/src/components/popover/utils.ts#L865

The calculation for left or right safe area seems incorrect as well. While the safe area is accounted for there... https://github.com/ionic-team/ionic-framework/blob/dc94ae01fe9e6c1b570559f0c8308b31e96cc5bf/core/src/components/popover/utils.ts#L844 https://github.com/ionic-team/ionic-framework/blob/dc94ae01fe9e6c1b570559f0c8308b31e96cc5bf/core/src/components/popover/utils.ts#L852 ... the safeAreaMargin parameter looks to be used incorrectly. MD always passes in a value of 0: https://github.com/ionic-team/ionic-framework/blob/dc94ae01fe9e6c1b570559f0c8308b31e96cc5bf/core/src/components/popover/animations/md.enter.ts#L59 And iOS uses a similar static value: https://github.com/ionic-team/ionic-framework/blob/dc94ae01fe9e6c1b570559f0c8308b31e96cc5bf/core/src/components/popover/animations/ios.enter.ts#L56 This is less impactful than with top/bottom safe area because the popover's trigger will likely be positioned within the safe area, and the contents of the popover itself (such as an ion-list) may also receive padding to account for it.

[btsiders]

3-month update? Workarounds?