From 5ad7fd19080b779cb94766f79c697931a09dec18 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Wed, 23 Nov 2016 18:08:45 +0100
Subject: [PATCH] perf(rendering): add css containment

---
 src/components/action-sheet/test/basic/main.html |  5 +----
 src/components/alert/alert.scss                  |  4 ++++
 src/components/app/app.scss                      |  8 ++++++++
 src/components/button/button.md.scss             |  2 ++
 src/components/button/button.scss                |  7 ++++++-
 src/components/content/content.scss              |  4 ++++
 src/components/fab/fab.scss                      | 16 +++++++++-------
 src/components/item/item.scss                    |  3 +++
 src/components/loading/loading.scss              |  2 ++
 src/components/menu/menu.scss                    |  5 +++++
 src/components/modal/modal.scss                  |  4 ++++
 src/components/modal/test/basic/main.html        |  5 +----
 src/components/picker/picker.scss                | 12 ++++++++++++
 src/components/toast/toast.scss                  |  4 ++++
 src/components/toolbar/toolbar.scss              |  4 ++++
 15 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/src/components/action-sheet/test/basic/main.html b/src/components/action-sheet/test/basic/main.html
index 36ec8176e87..9e601979f20 100644
--- a/src/components/action-sheet/test/basic/main.html
+++ b/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()">
-    Present Action Sheet 2
-    <span style="font-size:0.5em; text-transform: none"> (enableBackdropDismiss: false)</span>
-  </button>
+  <button ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
   <button ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
 
   <pre>
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 146668c2873..f372c9e5952 100644
--- a/src/components/alert/alert.scss
+++ b/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 {
diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index 20e33eebb8b..e6e08059d10 100644
--- a/src/components/app/app.scss
+++ b/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
 // --------------------------------------------------
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
index 36f0a2c5282..1f029727a71 100644
--- a/src/components/button/button.md.scss
+++ b/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;
 
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 0545bde7f84..b02013b5e25 100644
--- a/src/components/button/button.scss
+++ b/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
diff --git a/src/components/content/content.scss b/src/components/content/content.scss
index 79a20b4ad07..625d8a2535e 100644
--- a/src/components/content/content.scss
+++ b/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 {
diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss
index 025fd237ac5..fb12d37cbbd 100755
--- a/src/components/fab/fab.scss
+++ b/src/components/fab/fab.scss
@@ -44,11 +44,13 @@ $fab-list-button-background-color:      #f4f4f4 !default;
   font-kerning: none;
   user-select: none;
 
-  ion-icon {
-    flex: 1;
+  contain: strict;
+}
 
-    font-size: 2.4rem;
-  }
+.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;
 }
 
 
diff --git a/src/components/item/item.scss b/src/components/item/item.scss
index dce89117643..3a006805a69 100644
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@@ -14,6 +14,9 @@
 //   ion-item
 //   [ion-item]
 
+.item {
+  contain: content;
+}
 
 .item-block {
   display: flex;
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 6089118bf53..1a517e9f6dc 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/loading.scss
@@ -15,6 +15,8 @@ ion-loading {
 
   align-items: center;
   justify-content: center;
+
+  contain: strict;
 }
 
 .loading-wrapper {
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index 8d592d4ccbe..eaf8a2f9612 100644
--- a/src/components/menu/menu.scss
+++ b/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,
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 10de882115c..485bc54060b 100644
--- a/src/components/modal/modal.scss
+++ b/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));
diff --git a/src/components/modal/test/basic/main.html b/src/components/modal/test/basic/main.html
index a8f79bac8a4..906dd8f202b 100644
--- a/src/components/modal/test/basic/main.html
+++ b/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()">
-      Present modal w/ child ion-nav
-      <span style="font-size:0.5em; text-transform: none"> (enableBackdropDismiss: false)</span>
-    </button>
+    <button ion-button class="e2eOpenModal" (click)="presentModalChildNav()">Present modal w/ child ion-nav</button>
   </p>
   <p>
     <button ion-button class="e2eOpenToolbarModal" (click)="presentToolbarModal()">Present modal w/ toolbar (and alert)</button>
diff --git a/src/components/picker/picker.scss b/src/components/picker/picker.scss
index 4fbea0341d0..c9570ec76c6 100644
--- a/src/components/picker/picker.scss
+++ b/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 {
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index 68e7bc6e074..434bd8ab604 100644
--- a/src/components/toast/toast.scss
+++ b/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 {
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index fd04a9d3cad..7127f294e44 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/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 {