Open NLueg opened 11 months ago
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.
Hey, I just created an example application: https://github.com/NLueg/ionic-popover-safe-area-issue
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.
3-month update? Workarounds?
Prerequisites
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.