diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index 46eb545a99..b3cc23187b 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -43,8 +43,8 @@ $card-ios-header-padding:              16px !default;
     border: none;
   }
 
-  .item::before,
-  .item::after {
+  .item:before,
+  .item:after {
     left: 0;
   }
 
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 2bcc45004f..ec81c26df9 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -26,7 +26,7 @@ $checkbox-ios-checkmark-color-on:    $background-color !default;
     border-color: $checkbox-ios-border-color-on;
   }
 
-  &[aria-checked=true] .checkbox-icon::after {
+  &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
     border: 1px solid $checkbox-ios-checkmark-color-on;
     top: 3px;
diff --git a/ionic/components/checkbox/modes/material.scss b/ionic/components/checkbox/modes/material.scss
index d48fb509a4..b00a3c7919 100644
--- a/ionic/components/checkbox/modes/material.scss
+++ b/ionic/components/checkbox/modes/material.scss
@@ -28,7 +28,7 @@ $checkbox-md-checkmark-color-on:    $background-color !default;
     border-color: $checkbox-md-border-color-on;
   }
 
-  &[aria-checked=true] .checkbox-icon::after {
+  &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
     border: 2px solid $checkbox-md-checkmark-color-on;
     top: 0;
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 7574366182..b16057a4e1 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -176,7 +176,7 @@ button.item.item {
   border: none;
 }
 
-.item.item.item.no-border-bottom + .item::before {
+.item.item.item.no-border-bottom + .item:before {
   border: none;
 }
 
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index a5c4aa0a68..0f3de483cd 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -13,7 +13,7 @@ $radio-ios-active-color:       color(primary) !default;
     height: 21px;
   }
 
-  &[aria-checked=true] .radio-icon::after {
+  &[aria-checked=true] .radio-icon:after {
     position: absolute;
     border: 2px solid $radio-ios-active-color;
     top: 3px;
@@ -40,7 +40,7 @@ $radio-ios-active-color:       color(primary) !default;
 
   .radio[mode=ios][#{$color-name}] {
 
-    &[aria-checked=true] .radio-icon::after {
+    &[aria-checked=true] .radio-icon:after {
       border-color: $color-value;
     }
 
diff --git a/ionic/components/radio/modes/material.scss b/ionic/components/radio/modes/material.scss
index 3f842dbb1b..4d389787dd 100644
--- a/ionic/components/radio/modes/material.scss
+++ b/ionic/components/radio/modes/material.scss
@@ -29,7 +29,7 @@ $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
     border-color: $radio-md-active-color;
   }
 
-  .radio-icon::after {
+  .radio-icon:after {
     position: absolute;
     top: $radio-md-border-width;
     left: $radio-md-border-width;
@@ -42,7 +42,7 @@ $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
     transform: scale3d(0, 0, 0);
   }
 
-  &[aria-checked=true] .radio-icon::after {
+  &[aria-checked=true] .radio-icon:after {
     transform: scale3d(1, 1, 1);
   }
 
@@ -64,7 +64,7 @@ $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
       border-color: $color-value;
     }
 
-    &[aria-checked=true] .radio-icon::after {
+    &[aria-checked=true] .radio-icon:after {
       background: $color-value;
     }
 
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 71fbebdc80..43bb705ed1 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -5,24 +5,21 @@
 $switch-ios-width:                     51px !default;
 $switch-ios-height:                    32px !default;
 $switch-ios-border-width:              2px !default;
-$switch-ios-border-radius:             30px !default;
+$switch-ios-border-radius:             $switch-ios-height / 2 !default;
 
 $switch-ios-off-bg-color:              $list-background-color !default;
 $switch-ios-off-border-color:          lighten($list-border-color, 10%) !default;
 
 $switch-ios-on-bg-color:               color(primary) !default;
-$switch-ios-on-border-color:           $switch-ios-on-bg-color !default;
 
 $switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
 $switch-ios-handle-height:             $switch-ios-handle-width !default;
-$switch-ios-handle-radius:             $switch-ios-handle-width !default;
-$switch-ios-handle-dragging-bg-color:  darken($switch-ios-off-bg-color, 5%) !default;
-$switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
+$switch-ios-handle-radius:             $switch-ios-handle-height / 2 !default;
+$switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
 
-$switch-ios-handle-off-bg-color:       $switch-ios-off-bg-color !default;
-$switch-ios-handle-on-bg-color:        $switch-ios-off-bg-color !default;
+$switch-ios-handle-bg-color:           $switch-ios-off-bg-color !default;
 
-$switch-ios-transition-duration:       200ms !default;
+$switch-ios-transition-duration:       300ms !default;
 
 
 .switch[mode=ios] {
@@ -32,41 +29,62 @@ $switch-ios-transition-duration:       200ms !default;
     padding: 6px $item-ios-padding-right 6px ($item-ios-padding-left + 20);
   }
 
+
+  // Switch Background Track
+  // -----------------------------------------
+
   .switch-icon {
+    // bg track, when not checked
     position: relative;
     width: $switch-ios-width;
     height: $switch-ios-height;
     border-radius: $switch-ios-border-radius;
     pointer-events: none;
-    background-color: $switch-ios-off-bg-color;
+
+    background-color: $switch-ios-off-border-color;
+    will-change: background-color;
     transition: background-color $switch-ios-transition-duration;
   }
 
-  .switch-track {
-    width: 100%;
-    height: 100%;
-    border: solid $switch-ios-border-width $switch-ios-off-border-color;
-    border-radius: $switch-ios-border-radius;
-    background-color: $switch-ios-off-bg-color;
-    will-change: border-width, opacity;
-    transition-property: border-width, opacity;
-    transition-duration: $switch-ios-transition-duration + 50ms;
+  &[aria-checked=true] .switch-icon {
+    // bg track, when checked
+    background-color: $switch-ios-on-bg-color;
   }
 
-  .switch-track::before {
+
+  // Switch Background Track, Inner Oval
+  // -----------------------------------------
+
+  .switch-icon:before {
+    // inner bg track's oval, when not checked
+    content: '';
     position: absolute;
     top: $switch-ios-border-width;
+    right: $switch-ios-border-width;
     left: $switch-ios-border-width;
-    right: 50%;
     bottom: $switch-ios-border-width;
-    content: '';
+
     border-radius: $switch-ios-border-radius;
-    background-color: $switch-ios-off-border-color;
-    will-change: right;
-    transition: right $switch-ios-transition-duration;
+    background-color: $switch-ios-off-bg-color;
+
+    will-change: transform;
+    transform: scale3d(1, 1, 1);
+    transition: transform $switch-ios-transition-duration;
   }
 
-  .switch-handle {
+  &[aria-checked=true] .switch-icon:before,
+  .activated .switch-icon:before {
+    // inner bg track's oval, when checked
+    transform: scale3d(0, 0, 0);
+  }
+
+
+  // Switch Knob
+  // -----------------------------------------
+
+  .switch-icon:after {
+    // knob, when not checked
+    content: '';
     position: absolute;
     top: $switch-ios-border-width;
     left: $switch-ios-border-width;
@@ -75,42 +93,27 @@ $switch-ios-transition-duration:       200ms !default;
     height: $switch-ios-handle-height;
 
     border-radius: $switch-ios-handle-radius;
-    background-color: $switch-ios-handle-off-bg-color;
+    background-color: $switch-ios-handle-bg-color;
     box-shadow: $switch-ios-handle-box-shadow;
 
-    will-change: width, left, transform;
-
-    transition-property: width, left, transform;
-    transition-duration: $switch-ios-transition-duration;
+    will-change: transform, width, left;
+    transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 120ms ease-in-out 80ms;
   }
 
-  .activated .switch-handle {
-    width: $switch-ios-handle-width + 6;
-  }
-
-  &[aria-checked=true] .switch-icon {
-    background-color: $switch-ios-on-bg-color;
-  }
-
-  .activated .switch-track,
-  &[aria-checked=true] .switch-track {
-    border-width: $switch-ios-height / 2;
-  }
-
-  &[aria-checked=true] .switch-track {
-    opacity: 0;
-
-    &::before {
-      right: 15%;
-    }
-  }
-
-  &[aria-checked=true] .switch-handle {
-    background-color: $switch-ios-handle-on-bg-color;
+  &[aria-checked=true] .switch-icon:after {
+    // knob, when checked
     transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
   }
 
-  &[aria-checked=true] .activated .switch-handle {
+  .activated .switch-icon:after {
+    // when pressing down on the switch and NOT checked
+    // then make the knob wider
+    width: $switch-ios-handle-width + 6;
+  }
+
+  &[aria-checked=true] .activated .switch-icon:after {
+    // when pressing down on the switch and IS checked
+    // make the knob wider and move it left a bit
     left: $switch-ios-border-width - 6;
   }
 
diff --git a/ionic/components/switch/modes/material.scss b/ionic/components/switch/modes/material.scss
index 207fd93db2..e22097abe3 100644
--- a/ionic/components/switch/modes/material.scss
+++ b/ionic/components/switch/modes/material.scss
@@ -15,7 +15,7 @@ $switch-md-handle-off-bg-color:       $background-color !default;
 $switch-md-handle-on-bg-color:        $switch-md-active-color !default;
 $switch-md-handle-box-shadow:         0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 
-$switch-md-transition-duration:       280ms !default;
+$switch-md-transition-duration:       300ms !default;
 
 
 .switch[mode=md] {
@@ -25,41 +25,54 @@ $switch-md-transition-duration:       280ms !default;
     padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20);
   }
 
-  .switch-icon {
-    position: relative;
-    pointer-events: none;
-  }
 
-  .switch-track {
+  // Switch Background Track
+  // -----------------------------------------
+
+  .switch-icon {
+    // bg track, when not checked
+    position: relative;
     width: $switch-md-track-width;
     height: $switch-md-track-height;
+    pointer-events: none;
+    border-radius: $switch-md-track-height;
 
     background-color: $switch-md-track-off-bg-color;
-    border-radius: $switch-md-track-height;
+    will-change: background-color;
+    transition: background-color $switch-md-transition-duration
   }
 
-  .switch-handle {
+  &[aria-checked=true] .switch-icon {
+    // bg track, when not checked
+    background-color: $switch-md-track-on-bg-color;
+  }
+
+
+  // Switch Knob
+  // -----------------------------------------
+
+  .switch-icon:after {
+    // knob, when not checked
+    content: '';
     position: absolute;
     top: ($switch-md-handle-height - $switch-md-track-height) / -2;
-    left: 0;// ($switch-md-handle-height - $switch-md-track-height) / -2;
+    left: 0;
 
     width: $switch-md-handle-width;
     height: $switch-md-handle-height;
 
     border-radius: 50%;
-    background-color: $switch-md-handle-off-bg-color;
     box-shadow: $switch-md-handle-box-shadow;
 
-    will-change: transform;
-    transition-property: transform;
+    background-color: $switch-md-handle-off-bg-color;
+
+    will-change: transform, background-color;
+    transition-property: transform, background-color;
     transition-duration: $switch-md-transition-duration;
   }
 
-  &[aria-checked=true] .switch-track {
-    background-color: $switch-md-track-on-bg-color;
-  }
-
-  &[aria-checked=true] .switch-handle {
+  &[aria-checked=true] .switch-icon:after {
+    // knob, when not checked
     background-color: $switch-md-handle-on-bg-color;
     transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
   }
@@ -74,11 +87,11 @@ $switch-md-transition-duration:       280ms !default;
 
   .switch[mode=md][#{$color-name}] {
 
-    &[aria-checked=true] .switch-track {
-      background-color: lighten($bg-on, 20%);
+    &[aria-checked=true] .switch-icon {
+      background-color: lighten($bg-on, 25%);
     }
 
-    &[aria-checked=true] .switch-handle {
+    &[aria-checked=true] .switch-icon:after {
       background-color: $bg-on;
     }
 
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 53392505a7..2ebce23e2c 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -128,10 +128,7 @@ class MediaSwitch {
     '<ng-content></ng-content>' +
   '</div>' +
   '<div class="item-media media-switch">' +
-    '<div class="switch-icon">' +
-      '<div class="switch-track"></div>' +
-      '<div class="switch-handle"></div>' +
-    '</div>' +
+    '<div class="switch-icon"></div>' +
   '</div>',
   directives: [MediaSwitch]
 })