Skip to content

Commit

Permalink
perf(rendering): add css containment
Browse files Browse the repository at this point in the history
  • Loading branch information
@manucorporat @adamdbradley
manucorporat authored and adamdbradley committed Nov 23, 2016
1 parent 624cb35 commit 5ad7fd1
Show file tree
Hide file tree
Showing 15 changed files with 69 additions and 16 deletions.
5 changes: 1 addition & 4 deletions src/components/action-sheet/test/basic/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions src/components/alert/alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ ion-alert {

align-items: center;
justify-content: center;

contain: strict;
}

ion-alert.alert-top {
Expand All @@ -44,6 +46,8 @@ ion-alert input {
max-height: $alert-max-height;

opacity: 0;

contain: content;
}

.alert-title {
Expand Down
8 changes: 8 additions & 0 deletions src/components/app/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
// --------------------------------------------------
Expand Down
2 changes: 2 additions & 0 deletions src/components/button/button.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
7 changes: 6 additions & 1 deletion src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -31,6 +30,8 @@ $button-round-border-radius: 64px !default;

font-kerning: none;
user-select: none;

contain: content;
}

.button-inner {
Expand Down Expand Up @@ -68,6 +69,8 @@ button[disabled],
clear: both;

width: 100%;

contain: strict;
}

.button-block::after {
Expand All @@ -82,6 +85,8 @@ button[disabled],
display: block;

width: 100%;

contain: strict;
}

// Full Outline Button
Expand Down
4 changes: 4 additions & 0 deletions src/components/content/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ ion-content {

width: 100%;
height: 100%;

contain: layout size style;
}

.ion-page > ion-content {
Expand Down Expand Up @@ -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 {
Expand Down
16 changes: 9 additions & 7 deletions src/components/fab/fab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}


Expand Down
3 changes: 3 additions & 0 deletions src/components/item/item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
// ion-item
// [ion-item]

.item {
contain: content;
}

.item-block {
display: flex;
Expand Down
2 changes: 2 additions & 0 deletions src/components/loading/loading.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ ion-loading {

align-items: center;
justify-content: center;

contain: strict;
}

.loading-wrapper {
Expand Down
5 changes: 5 additions & 0 deletions src/components/menu/menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ ion-menu {
left: 0;

display: none;

contain: strict;
}

ion-menu.show-menu {
Expand All @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions src/components/modal/modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ ion-modal {

width: 100%;
height: 100%;

contain: strict;
}

ion-modal ion-backdrop {
Expand All @@ -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));
Expand Down
5 changes: 1 addition & 4 deletions src/components/modal/test/basic/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions src/components/picker/picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -40,6 +46,8 @@ ion-picker-cmp {
max-width: $picker-max-width;

transform: translate3d(0, 100%, 0);

contain: strict;
}

.picker-columns {
Expand All @@ -49,6 +57,8 @@ ion-picker-cmp {
overflow: hidden;

justify-content: center;

contain: strict;
}

.picker-col {
Expand All @@ -61,6 +71,8 @@ ion-picker-cmp {
height: 100%;

box-sizing: content-box;

contain: content;
}

.picker-opts {
Expand Down
4 changes: 4 additions & 0 deletions src/components/toast/toast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ ion-toast {
height: $toast-width;

pointer-events: none;

contain: strict;
}

.toast-container {
Expand All @@ -28,6 +30,8 @@ ion-toast {
align-items: center;

pointer-events: auto;

contain: content;
}

.toast-button {
Expand Down
4 changes: 4 additions & 0 deletions src/components/toolbar/toolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ ion-toolbar {
justify-content: space-between;

width: 100%;

contain: content;
}

.toolbar-background {
Expand All @@ -32,6 +34,8 @@ ion-toolbar {
transform: translateZ(0);

pointer-events: none;

contain: strict;
}

ion-title {
Expand Down

1 comment on commit 5ad7fd1

@jourdan-jobox
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw this under performance improvements in the CHANGELOG; would you guys be able to explain what contain does for us in the UI? Reason why is because I need to remove the contain on one of my Item elements for my UI to look the same prior to the RC4 update, but maybe I shouldn't do this if I fully understand how the contain helps :)

Please sign in to comment.