Description
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
- v4.x
- v5.x
- v6.x
Current Behavior
When displaying action sheet on devices where --ion-safe-area-bottom has a value, and the mode is 'md', the action sheet overlaps the safe area and does not apply appropriate padding to the bottom button:
Expected Behavior
The action-sheet should respect the safe area:
Steps to Reproduce
Just display any action-sheet in MD mode and change the value of --ion-safe-area-bottom. This can be reproduced even in the ionic docs themselves. See code repro URL.
Code Reproduction URL
https://ionicframework.com/docs/demos/api/action-sheet/index.html?ionic:mode=md
Ionic Info
Version 5x and whatever version the ionic docs are running.
Ionic:
Ionic CLI : 6.17.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.8.5
@angular-devkit/build-angular : 13.0.1
@angular-devkit/schematics : 13.0.1
@angular/cli : 13.0.1
@ionic/angular-toolkit : 5.0.3
Additional Information
The last child of the action-sheet should have padding applied to its bottom:
.action-sheet-group.sc-ion-action-sheet-md:last-child {
padding-bottom: 0;
padding-bottom: var(--ion-safe-area-bottom);
}