diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index 590892088d..5639d72f98 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -21,6 +21,7 @@
 
 :host(.modal-card) {
   --backdrop-opacity: 0.15;
+  --width: 100%;
   
   align-items: flex-end;
 }
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index 36e9d6a619..b1169ee2cb 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -157,6 +157,8 @@ export class CalendarComponentModule {}
 
 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
 
+If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.
+
 ```javascript
 import { IonRouterOutlet } from '@ionic/angular';
 
diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md
index d8b16df1e0..68425978a6 100644
--- a/core/src/components/modal/usage/angular.md
+++ b/core/src/components/modal/usage/angular.md
@@ -135,6 +135,8 @@ export class CalendarComponentModule {}
 
 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
 
+If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.
+
 ```javascript
 import { IonRouterOutlet } from '@ionic/angular';