bug: ion-select shows items below the iPhone "header" which makes them unaccessible on iPhone 13 mini

[maelp]

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 report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

When adding a modal with a ion-select with interface="popover", the list goes under the iPhone top header, which makes it unselectable

Expected Behavior

It should limit the list height to below the iPhone header and make it scrollable

Steps to Reproduce

Create a modal (not sure if needed), create a ion-select with interface="popover", add many items to it, compile it on the iPhone simulator (bugs also happens when deployed to a real device) for iPhone 13 mini

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.4

Utility:

cordova-res (update available: 0.15.4) : 0.15.3 native-run (update available: 1.7.1) : 1.5.0

System:

NodeJS : v16.18.0 npm : 9.1.2 OS : macOS

Additional Information

No response

[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.

[averyjohnston]

This issue is being closed due to lack of a reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!