[Switch] Fix rendering in IE 11 and Safari (#17095)

* Fixes - Poor switch animation in mobile safari * Circle CI - small patch * fix rendering of the demos
mui · Aug 22, 2019 · 343ae8e · 343ae8e
1 parent 4f10bf7
commit 343ae8e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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],