perf(rendering): add css containment

src/components/action-sheet/test/basic/main.html

@@ -10,10 +10,7 @@
 <ion-content padding>
 
   <button ion-button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
-  <button ion-button block (click)="presentActionSheet2()">
+  <button ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
-    Present Action Sheet 2
-    <span style="font-size:0.5em; text-transform: none"> (enableBackdropDismiss: false)</span>
-  </button>
   <button ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
 
   <pre>

src/components/alert/alert.scss

@@ -22,6 +22,8 @@ ion-alert {
 
   align-items: center;
   justify-content: center;
+
+  contain: strict;
 }
 
 ion-alert.alert-top {
@@ -44,6 +46,8 @@ ion-alert input {
   max-height: $alert-max-height;
 
   opacity: 0;
+
+  contain: content;
 }
 
 .alert-title {

src/components/app/app.scss

@@ -92,6 +92,14 @@ ion-tab.show-tab {
   transform: translateY(0);
 }
 
+ion-app,
+ion-nav,
+ion-tab,
+.app-root,
+.ion-page {
+  contain: strict;
+}
+
 
 // Page Container Structure
 // --------------------------------------------------

src/components/button/button.md.scss

@@ -166,6 +166,8 @@ $button-md-round-border-radius:                 $button-round-border-radius !def
 // --------------------------------------------------
 
 .button-md {
+  overflow: hidden;
+
   margin: $button-md-margin;
   padding: $button-md-padding;
 

src/components/button/button.scss

@@ -16,7 +16,6 @@ $button-round-border-radius:      64px !default;
   position: relative;
   z-index: 0;
   display: inline-block;
-  overflow: hidden;
 
   text-align: center;
   text-overflow: ellipsis;
@@ -31,6 +30,8 @@ $button-round-border-radius:      64px !default;
 
   font-kerning: none;
   user-select: none;
+
+  contain: content;
 }
 
 .button-inner {
@@ -68,6 +69,8 @@ button[disabled],
   clear: both;
 
   width: 100%;
+
+  contain: strict;
 }
 
 .button-block::after {
@@ -82,6 +85,8 @@ button[disabled],
   display: block;
 
   width: 100%;
+
+  contain: strict;
 }
 
 // Full Outline Button

src/components/content/content.scss

@@ -11,6 +11,8 @@ ion-content {
 
   width: 100%;
   height: 100%;
+
+  contain: layout size style;
 }
 
 .ion-page > ion-content {
@@ -38,6 +40,8 @@ a {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
+
+  contain: size style layout;
 }
 
 ion-content.js-scroll > .scroll-content {

src/components/fab/fab.scss

@@ -44,12 +44,14 @@ $fab-list-button-background-color:      #f4f4f4 !default;
   font-kerning: none;
   user-select: none;
 
-  ion-icon {
+  contain: strict;
+}
+
+.fab ion-icon {
   flex: 1;
 
   font-size: 2.4rem;
 }
-}
 
 // FAB mini
 // --------------------------------------------------
@@ -61,10 +63,10 @@ $fab-list-button-background-color:      #f4f4f4 !default;
   height: $fab-mini-size;
 
   line-height: $fab-mini-size;
-
-  .fab-close-icon {
-    line-height: $fab-mini-size;
 }
+
+.fab[mini] .fab-close-icon {
+  line-height: $fab-mini-size;
 }
 
 

src/components/item/item.scss

@@ -14,6 +14,9 @@
 //   ion-item
 //   [ion-item]
 
+.item {
+  contain: content;
+}
 
 .item-block {
   display: flex;

src/components/loading/loading.scss

@@ -15,6 +15,8 @@ ion-loading {
 
   align-items: center;
   justify-content: center;
+
+  contain: strict;
 }
 
 .loading-wrapper {

src/components/menu/menu.scss

@@ -15,6 +15,8 @@ ion-menu {
   left: 0;
 
   display: none;
+
+  contain: strict;
 }
 
 ion-menu.show-menu {
@@ -32,8 +34,11 @@ ion-menu.show-menu {
   display: block;
 
   width: $menu-width;
+  height: 100%;
 
   transform: translate3d(-9999px, 0, 0);
+
+  contain: strict;
 }
 
 .menu-inner > ion-header,

src/components/modal/modal.scss

@@ -31,6 +31,8 @@ ion-modal {
 
   width: 100%;
   height: 100%;
+
+  contain: strict;
 }
 
 ion-modal ion-backdrop {
@@ -44,6 +46,8 @@ ion-modal ion-backdrop {
 
   height: 100%;
 
+  contain: strict;
+
   @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
     position: absolute;
     top: calc(50% - (#{$modal-inset-height-small}/2));

src/components/modal/test/basic/main.html

@@ -16,10 +16,7 @@
     <button ion-button (click)="presentModal()">Present modal, pass params</button>
   </p>
   <p>
-    <button ion-button class="e2eOpenModal" (click)="presentModalChildNav()">
+    <button ion-button class="e2eOpenModal" (click)="presentModalChildNav()">Present modal w/ child ion-nav</button>
-      Present modal w/ child ion-nav
-      <span style="font-size:0.5em; text-transform: none"> (enableBackdropDismiss: false)</span>
-    </button>
   </p>
   <p>
     <button ion-button class="e2eOpenToolbarModal" (click)="presentToolbarModal()">Present modal w/ toolbar (and alert)</button>

src/components/picker/picker.scss

@@ -16,10 +16,16 @@ ion-picker-cmp {
 
   width: $picker-width;
   height: $picker-width;
+
+  contain: strict;
 }
 
 .picker-toolbar {
   z-index: 1;
+
+  width: 100%;
+
+  contain: strict;
 }
 
 .picker-wrapper {
@@ -40,6 +46,8 @@ ion-picker-cmp {
   max-width: $picker-max-width;
 
   transform: translate3d(0, 100%, 0);
+
+  contain: strict;
 }
 
 .picker-columns {
@@ -49,6 +57,8 @@ ion-picker-cmp {
   overflow: hidden;
 
   justify-content: center;
+
+  contain: strict;
 }
 
 .picker-col {
@@ -61,6 +71,8 @@ ion-picker-cmp {
   height: 100%;
 
   box-sizing: content-box;
+
+  contain: content;
 }
 
 .picker-opts {

src/components/toast/toast.scss

@@ -20,6 +20,8 @@ ion-toast {
   height: $toast-width;
 
   pointer-events: none;
+
+  contain: strict;
 }
 
 .toast-container {
@@ -28,6 +30,8 @@ ion-toast {
   align-items: center;
 
   pointer-events: auto;
+
+  contain: content;
 }
 
 .toast-button {

src/components/toolbar/toolbar.scss

@@ -17,6 +17,8 @@ ion-toolbar {
   justify-content: space-between;
 
   width: 100%;
+
+  contain: content;
 }
 
 .toolbar-background {
@@ -32,6 +34,8 @@ ion-toolbar {
   transform: translateZ(0);
 
   pointer-events: none;
+
+  contain: strict;
 }
 
 ion-title {