diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js
index 2f3fc1e37f6d86..556aea3711c897 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.js
+++ b/docs/src/pages/components/switches/CustomizedSwitches.js
@@ -31,6 +31,7 @@ const IOSSwitch = withStyles(theme => ({
   switchBase: {
     padding: 1,
     '&$checked': {
+      transform: 'translateX(16px)',
       color: theme.palette.common.white,
       '& + $track': {
         backgroundColor: '#52d869',
@@ -84,6 +85,7 @@ const AntSwitch = withStyles(theme => ({
     padding: 2,
     color: theme.palette.grey[500],
     '&$checked': {
+      transform: 'translateX(12px)',
       color: theme.palette.common.white,
       '& + $track': {
         opacity: 1,
diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx
index 64706cc18d4d9c..401c357b4c8d9f 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.tsx
+++ b/docs/src/pages/components/switches/CustomizedSwitches.tsx
@@ -39,6 +39,7 @@ const IOSSwitch = withStyles(theme => ({
   switchBase: {
     padding: 1,
     '&$checked': {
+      transform: 'translateX(16px)',
       color: theme.palette.common.white,
       '& + $track': {
         backgroundColor: '#52d869',
@@ -92,6 +93,7 @@ const AntSwitch = withStyles(theme => ({
     padding: 2,
     color: theme.palette.grey[500],
     '&$checked': {
+      transform: 'translateX(12px)',
       color: theme.palette.common.white,
       '& + $track': {
         opacity: 1,
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index d846128b15ff8c..9e3a0b4ddffbb3 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -40,10 +40,8 @@ export const styles = theme => ({
     transition: theme.transitions.create(['left', 'transform'], {
       duration: theme.transitions.duration.shortest,
     }),
-    willChange: 'left, transform',
     '&$checked': {
-      left: '100%',
-      transform: 'translateX(-100%)',
+      transform: 'translateX(50%)',
     },
     '&$disabled': {
       color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],