Skip to content
19 changes: 18 additions & 1 deletion core/src/components/action-sheet/action-sheet.ios.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,24 @@
// ---------------------------------------------------

.action-sheet-wrapper {
@include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
@include margin(var(--ion-safe-area-top, 0), auto, null, auto);
/**
* Bottom safe area is applied as padding so that it impacts the bounding box.
* When the action sheet is shown/hidden, this element is transformed by translating
* 100% of its height. This translation needs to include the bottom safe area
* otherwise part of the action sheet will still be visible at the end of
* the show transition.
*
* If this code is changed, reviewers should verify that the action
* sheet still translates out of the viewport completely when the bottom
* safe area is a positive value.
*/
@include padding(null, null, var(--ion-safe-area-bottom, 0), null);

// Using content-box to increase the height of the action sheet
// wrapper by the bottom padding (safe area) to animate the
// action sheet completely off the screen when safe area is set.
box-sizing: content-box;
}

// iOS Action Sheet Container
Expand Down