diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss index 9dcf3a357c..2454bc9817 100644 --- a/packages/core/src/components/modal/modal.scss +++ b/packages/core/src/components/modal/modal.scss @@ -97,28 +97,3 @@ ion-modal-controller { } } -.modal-content { - @include position(0, null, null, 0); - - position: absolute; - - display: block; - - // override the default visibility cloaking - // added for each component before it's loaded - // visibility: inherit !important; - - width: 100%; - height: 100%; - - // do not show by default, but still render - // so we can get dimensions before transitioning in - opacity: 0; - - contain: strict; -} - -.show-modal .modal-content { - // show the modal now that it's ready - opacity: 1; -} diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 45a66d7317..c7f61e6e3f 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -163,13 +163,12 @@ export class Modal { protected render() { const ThisComponent = this.component; - let userCssClasses = 'modal-content'; + let userCssClasses = 'ion-page'; if (this.cssClass) { userCssClasses += ` ${this.cssClass}`; } const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper'); - const thisComponentClasses = createThemedClasses(this.mode, this.color, userCssClasses); return [