From 93d1d02613bbd30a328538a2743caa68e32054fe Mon Sep 17 00:00:00 2001
From: Manuel Mtz-Almeida <manu.valladolid@gmail.com>
Date: Fri, 7 Apr 2017 20:36:20 +0200
Subject: [PATCH] perf(toggle): css containment

---
 src/components/toggle/toggle.ios.scss | 14 ++++++++++++--
 src/components/toggle/toggle.md.scss  |  4 +++-
 src/components/toggle/toggle.wp.scss  | 16 +++++++++++++---
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss
index 8c632a6db10..4603d527cb4 100644
--- a/src/components/toggle/toggle.ios.scss
+++ b/src/components/toggle/toggle.ios.scss
@@ -60,6 +60,13 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 
 .toggle-ios {
   position: relative;
+
+  width: $toggle-ios-width;
+  height: $toggle-ios-height;
+
+  box-sizing: content-box;
+
+  contain: strict;
 }
 
 
@@ -70,8 +77,8 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
   position: relative;
   display: block;
 
-  width: $toggle-ios-width;
-  height: $toggle-ios-height;
+  width: 100%;
+  height: 100%;
 
   border-radius: $toggle-ios-border-radius;
 
@@ -117,6 +124,9 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
   box-shadow: $toggle-ios-handle-box-shadow;
 
   transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
+
+  will-change: transform;
+  contain: strict;
 }
 
 
diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss
index e4885d40bb6..7d0b6bc528b 100644
--- a/src/components/toggle/toggle.md.scss
+++ b/src/components/toggle/toggle.md.scss
@@ -67,6 +67,8 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
   height: $toggle-md-track-height;
 
   box-sizing: content-box;
+
+  contain: strict;
 }
 
 
@@ -117,7 +119,7 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 // Material Design Toggle Background Track: Checked
 // -----------------------------------------
 
-.toggle-md .toggle-checked {
+.toggle-md.toggle-checked .toggle-icon {
   background-color: $toggle-md-track-background-color-on;
 }
 
diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss
index 996eaa37842..8c39b66ec07 100644
--- a/src/components/toggle/toggle.wp.scss
+++ b/src/components/toggle/toggle.wp.scss
@@ -72,6 +72,13 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 
 .toggle-wp {
   position: relative;
+
+  width: $toggle-wp-track-width;
+  height: $toggle-wp-track-height;
+
+  box-sizing: content-box;
+
+  contain: strict;
 }
 
 
@@ -82,14 +89,16 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
   position: relative;
   display: block;
 
-  width: $toggle-wp-track-width;
-  height: $toggle-wp-track-height;
+  width: 100%;
+  height: 100%;
 
   border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
   border-radius: $toggle-wp-track-height;
   background-color: $toggle-wp-track-background-color-off;
 
   pointer-events: none;
+
+  contain: strict;
 }
 
 
@@ -109,6 +118,8 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 
   transition-duration: $toggle-wp-transition-duration;
   transition-property: transform, background-color;
+
+  will-change: transform, background-color;
 }
 
 
@@ -126,7 +137,6 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 
 .toggle-wp.toggle-checked .toggle-inner {
   background-color: $toggle-wp-handle-background-color-on;
-  // transform: translate3d(23px, 0, 0);
   transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
 }