bug: long action sheet with safe area pushes cancel button off screen

[wsamoht]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

It appears starting in Ionic 7, the Cancel button for the IonActionSheet and IonSelect (with interface "action-sheet") is being pushed off screen when there is --ion-safe-area-top set.

Expected Behavior

I would expect the Cancel button to be fixed at the bottom and fully visible.

Steps to Reproduce

Steps

1. Create an ion-action-sheet (with a Cancel button) or ion-select (with interface=action-sheet) with enough items to force a scroll
2. Set --ion-safe-area-top

Code Reproduction URL

Stackblitz examples

• IonActionSheet
• IonSelect

Ionic Info

Ionic:

   Ionic CLI       : 7.1.1
   Ionic Framework : @ionic/vue 7.1.2

Capacitor:

   Capacitor CLI      : 4.8.1
   @capacitor/android : 4.8.1
   @capacitor/core    : 4.8.1
   @capacitor/ios     : 4.8.1

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v18.12.1
   npm    : 8.19.2
   OS     : Linux 5.15

Additional Information

This is affecting both Android and iOS.

[liamdebeasi]

Thanks, I can reproduce this. As a temporary workaround you can set --height: 100%, though note that the content will take slightly longer to appear on animate in due to the increase height on the inner wrapper element.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.