fix(modal): fixes displaying page inside modal

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;
-}

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 [
       <div
@@ -185,7 +184,7 @@ export class Modal {
       >
         <ThisComponent
           {...this.componentProps}
-          class={thisComponentClasses}
+          class={userCssClasses}
         >
         </ThisComponent>
       </div>

packages/core/src/components/modal/test/basic/index.html

@@ -31,7 +31,7 @@
     function presentModal() {
       controller
         .create({
-          component: 'ion-content'
+          component: 'page-one'
         })
         .then(modal => {
           modal.present();