Ioni c 5 Модальный режим поверх модального отсутствует ion-backdrop

Question

Почему мой стиль ion-backdrop + modal shadow не работает, когда я открываю модальное окно поверх другого модального окна?

ПРЕДИСЛОВИЕ: Это работало нормально с V4, но сломалось при обновлении до V5. Я не хочу менять свой подход к странице, просто исправьте CSS / все, что на самом деле вызывает проблему ниже.

• Мое приложение открывает модальную страницу с настраиваемым css, чтобы сделать это полный экран.

  Затем я могу открыть другой нормальный модальный (но не полный экран) поверх. В этом втором модальном окне отсутствует ионный фон и его стиль тени на границе.

  Я вижу, что ионный фон определенно находится в DOM, но он явно не отображается.

Step1 Fine введите описание изображения здесь

Step 2 - сломанный ионный фон: введите описание изображения здесь

Отображение моего пользовательского модального окна:

async showClipboard() {
    const modal = await this._ModalController.create({
      component: ClipboardPage,
      cssClass: 'custom-round-modal',
      componentProps: {
        user: this.user
      },
      showBackdrop: true
    });
    await modal.present(); 
  }

CSS:

@media only screen and (min-width: 768px) {
  .custom-round-modal {
    .modal-wrapper {
      border-radius: 15px !important;
      -moz-border-radius: 15px !important;
      -webkit-border-radius: 15px !important;
      .ion-page {
        border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
      }
    }
  }
}

Answer 1

Во-первых, я думаю, вы дважды по ошибке вставили один и тот же скриншот. Но у меня такая же проблема, поэтому я знаю, что вы имеете в виду.

Похоже, что Ioni c 5 представил этот css для модальных окон:

.sc-ion-modal-ios-h:first-of-type {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

Что означает когда вы показываете несколько модальных окон одновременно, только первый получит фон.

Возможный обходной путь - добавить фон самостоятельно в ваш глобальный css, используя что-то вроде этого:

ion-modal {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

Или используйте css класс, который использует Ioni c (но учтите, что это iOS специфик c, поэтому вам, вероятно, придется сделать то же самое с Android -эквивалентным классом ):

.sc-ion-modal-ios-h {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

ПРИМЕЧАНИЕ. Скорее всего, это не будет хорошо смотреться, если вы показываете несколько модальных окон друг над другом, но не в полноэкранном режиме, поскольку вы получите несколько фонов друг над другом (так они будут становиться все темнее). Но поскольку ваша проблема не является полноэкранным модальным окном поверх полноэкранного, я думаю, что это сработает в вашем случае.

Надеюсь, команда Ioni c предложит более элегантное решение этой проблемы .