perf(toggle): css containment

Author: manucorporat

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;
 }
 
 

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;
 }
 

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);
 }