From 10f2077516594a4fc69e6f67ad7ff8ac4038935e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 27 May 2024 13:57:19 +0200 Subject: [PATCH] MOBILE-4470 modal: Fix modal backdrop dismiss on iOS --- src/theme/components/ion-modal.scss | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/theme/components/ion-modal.scss b/src/theme/components/ion-modal.scss index 3aadf1814..5abc4a544 100644 --- a/src/theme/components/ion-modal.scss +++ b/src/theme/components/ion-modal.scss @@ -75,24 +75,24 @@ ion-modal { --ion-safe-area-left: 0px; --ion-safe-area-right: 0px; + --height: 100% !important; + --width: calc(100% - var(--modal-lateral-margin)); + --box-shadow: 0 28px 48px rgb(0 0 0 / 40%); + + // These lines is intended to hide modal-shadow div only in iOS because it cannot be positioned correctly. + // Both are set on content part. + --max-height: 0px; + --max-width: 0px; + &::part(content) { @include margin-horizontal(var(--modal-lateral-margin), null); + --max-width: calc(var(--modal-lateral-max-width)); + --max-height: 100%; + position: absolute; @include position(0 !important, 0 !important, 0 !important, unset !important); display: block; - height: 100% !important; - width: calc(100% - var(--modal-lateral-margin)); - max-width: calc(var(--modal-lateral-max-width)); - box-shadow: 0 28px 48px rgb(0 0 0 / 40%); - } - - &::part(backdrop) { - visibility: visible; - } - - .modal-shadow { - display: none; } }