Merge pull request #4652 from hhaidar/master

[IE9] Switch from translate3d to translate for compatibility
mui · Jul 19, 2016 · 6ab4b47 · 6ab4b47
2 parents ce7ee2f + 9c0dc54
commit 6ab4b47
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 14 deletions.
diff --git a/src/Dialog/Dialog.js b/src/Dialog/Dialog.js
@@ -38,7 +38,7 @@ class TransitionItem extends Component {
     this.setState({
       style: {
         opacity: 1,
-        transform: `translate3d(0, ${spacing.desktopKeylineIncrement}px, 0)`,
+        transform: `translate(0, ${spacing.desktopKeylineIncrement}px)`,
       },
     });
 
@@ -49,7 +49,7 @@ class TransitionItem extends Component {
     this.setState({
       style: {
         opacity: 0,
-        transform: 'translate3d(0, 0, 0)',
+        transform: 'translate(0, 0)',
       },
     });
 

diff --git a/src/Drawer/Drawer.js b/src/Drawer/Drawer.js
@@ -151,7 +151,7 @@ class Drawer extends Component {
         zIndex: muiTheme.zIndex.drawer,
         left: 0,
         top: 0,
-        transform: `translate3d(${x}px, 0, 0)`,
+        transform: `translate(${x}px, 0)`,
         transition: !this.state.swiping && transitions.easeOut(null, 'transform', null),
         backgroundColor: theme.color,
         overflow: 'auto',
@@ -259,7 +259,7 @@ class Drawer extends Component {
 
   setPosition(translateX) {
     const drawer = ReactDOM.findDOMNode(this.refs.clickAwayableElement);
-    const transformCSS = `translate3d(${(this.getTranslateMultiplier() * translateX)}px, 0, 0)`;
+    const transformCSS = `translate(${(this.getTranslateMultiplier() * translateX)}px, 0)`;
     this.refs.overlay.setOpacity(1 - translateX / this.getMaxTranslateX());
     autoPrefix.set(drawer.style, 'transform', transformCSS);
   }

diff --git a/src/RefreshIndicator/RefreshIndicator.js b/src/RefreshIndicator/RefreshIndicator.js
@@ -16,7 +16,7 @@ function getStyles(props) {
       padding: padding,
       top: -10000,
       left: -10000,
-      transform: `translate3d(${10000 + props.left}px, ${10000 + props.top}px, 0)`,
+      transform: `translate(${10000 + props.left}px, ${10000 + props.top}px)`,
       opacity: props.status === 'hide' ? 0 : 1,
       transition: props.status === 'hide' ? transitions.create('all', '.3s', 'ease-out') : 'none',
     },

diff --git a/src/Snackbar/Snackbar.js b/src/Snackbar/Snackbar.js
@@ -27,8 +27,8 @@ function getStyles(props, context, state) {
       zIndex: zIndex.snackbar,
       visibility: open ? 'visible' : 'hidden',
       transform: open ?
-        'translate3d(0, 0, 0)' :
-        `translate3d(0, ${desktopSubheaderHeight}px, 0)`,
+        'translate(0, 0)' :
+        `translate(0, ${desktopSubheaderHeight}px)`,
       transition: `${transitions.easeOut('400ms', 'transform')}, ${
         transitions.easeOut('400ms', 'visibility')}`,
     },

diff --git a/src/TextField/TextFieldLabel.js b/src/TextField/TextFieldLabel.js
@@ -9,14 +9,14 @@ function getStyles(props) {
     transition: transitions.easeOut(),
     zIndex: 1, // Needed to display label above Chrome's autocomplete field background
     cursor: props.disabled ? 'not-allowed' : 'text',
-    transform: 'scale(1) translate3d(0, 0, 0)',
+    transform: 'scale(1) translate(0, 0)',
     transformOrigin: 'left top',
     pointerEvents: 'auto',
     userSelect: 'none',
   };
 
   const shrinkStyles = props.shrink ? Object.assign({
-    transform: 'perspective(1px) scale(0.75) translate3d(0, -28px, 0)',
+    transform: 'scale(0.75) translate(0, -28px)',
     pointerEvents: 'none',
   }, props.shrinkStyle) : null;
 

diff --git a/src/internal/EnhancedButton.js b/src/internal/EnhancedButton.js
@@ -309,7 +309,7 @@ class EnhancedButton extends Component {
        * See: http://stackoverflow.com/questions/17298739/
        * css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
        */
-      transform: disableTouchRipple && disableFocusRipple ? null : 'translate3d(0, 0, 0)',
+      transform: disableTouchRipple && disableFocusRipple ? null : 'translate(0, 0)',
       verticalAlign: href ? 'middle' : null,
     }, style);
 

diff --git a/src/internal/SlideInChild.js b/src/internal/SlideInChild.js
@@ -34,15 +34,15 @@ class SlideInChild extends Component {
       this.props.direction === 'down' ? '-100%' : '0';
 
     style.opacity = '0';
-    autoPrefix.set(style, 'transform', `translate3d(${x}, ${y}, 0)`);
+    autoPrefix.set(style, 'transform', `translate(${x}, ${y})`);
 
     this.enterTimer = setTimeout(callback, this.props.enterDelay);
   }
 
   componentDidEnter() {
     const style = ReactDOM.findDOMNode(this).style;
     style.opacity = '1';
-    autoPrefix.set(style, 'transform', 'translate3d(0,0,0)');
+    autoPrefix.set(style, 'transform', 'translate(0,0)');
   }
 
   componentWillLeave(callback) {
@@ -54,7 +54,7 @@ class SlideInChild extends Component {
       direction === 'down' ? '100%' : '0';
 
     style.opacity = '0';
-    autoPrefix.set(style, 'transform', `translate3d(${x}, ${y}, 0)`);
+    autoPrefix.set(style, 'transform', `translate(${x}, ${y})`);
 
     this.leaveTimer = setTimeout(callback, 450);
   }

diff --git a/src/internal/Tooltip.js b/src/internal/Tooltip.js
@@ -56,7 +56,7 @@ function getStyles(props, context, state) {
       top: verticalPosition === 'top' ?
         touchOffsetTop : 36,
       opacity: 0.9,
-      transform: `translate3d(0px, ${offset}px, 0px)`,
+      transform: `translate(0px, ${offset}px)`,
       transition: `${transitions.easeOut('0ms', 'top', '0ms')}, ${
         transitions.easeOut('450ms', 'transform', '0ms')}, ${
         transitions.easeOut('450ms', 'opacity', '0ms')}`,