perf(rendering): add css containment

manucorporat · adamdbradley · commit 5ad7fd19080b · 2016-11-23T11:08:45.000-06:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,8 @@ ion-alert {`
`22`	`22`
`23`	`23`	`align-items: center;`
`24`	`24`	`justify-content: center;`
	`25`	`+`
	`26`	`+ contain: strict;`
`25`	`27`	`}`
`26`	`28`
`27`	`29`	`ion-alert.alert-top {`
`@@ -44,6 +46,8 @@ ion-alert input {`
`44`	`46`	`max-height: $alert-max-height;`
`45`	`47`
`46`	`48`	`opacity: 0;`
	`49`	`+`
	`50`	`+ contain: content;`
`47`	`51`	`}`
`48`	`52`
`49`	`53`	`.alert-title {`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@ ion-content {`
`11`	`11`
`12`	`12`	`width: 100%;`
`13`	`13`	`height: 100%;`
	`14`	`+`
	`15`	`+ contain: layout size style;`
`14`	`16`	`}`
`15`	`17`
`16`	`18`	`.ion-page > ion-content {`
`@@ -38,6 +40,8 @@ a {`
`38`	`40`	`overflow-y: scroll;`
`39`	`41`	`-webkit-overflow-scrolling: touch;`
`40`	`42`	`will-change: scroll-position;`
	`43`	`+`
	`44`	`+ contain: size style layout;`
`41`	`45`	`}`
`42`	`46`
`43`	`47`	`ion-content.js-scroll > .scroll-content {`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,8 @@ ion-loading {`
`15`	`15`
`16`	`16`	`align-items: center;`
`17`	`17`	`justify-content: center;`
	`18`	`+`
	`19`	`+ contain: strict;`
`18`	`20`	`}`
`19`	`21`
`20`	`22`	`.loading-wrapper {`