Repository: mui/material-ui (TypeScript)
Date: 2019-06-18 19:21:34+00:00
Task type: Bug Fix

Issue:
change slide 'in' transform styles to none
<!--- Provide a general summary of the issue in the Title above -->
i was creating a drawer with a drag and drop package [(rbd from Atlassian)](https://github.com/atlassian/react-beautiful-dnd) when I stumbled upon an issue. due to the drawer being fixed to the right, the dragged element is pushed over to the right positioning it off screen. This happens because of the combination of `position: fixed;` and a transform value. For the drawer, actually the slide component, the entered style is `transform: translate(0px, 0px)`. This affect the transform of the dragged element of rbd, as they also position with transform.
<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
<!---
    Describe what should happen.
-->
The resulting transform value of the slide component should be customizable or should be `none`. changing the values on [these lines](https://github.com/mui-org/material-ui/blob/a52834b02fad29624829320de78841bbef97abaf/packages/material-ui/src/Slide/Slide.js#L129) will fix the described issue.

## Current Behavior 😯
<!---
    Describe what happens instead of the expected behavior.
-->
The resulting transform value of the slide component can not be customized. The hardcoded value is, in some use cases, affecting styling of child components as it has an actual value. This causes the element that's being dragged to be positioned wrong.

## Steps to Reproduce 🕹
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).

    This codesandbox.io template _may_ be a good starting point:
    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app

    If you're using typescript a better starting point would be
    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript

    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?

-->
Link: https://codesandbox.io/s/j9woi

## Context 🔦
<!---
    What are you trying to accomplish? How has this issue affected you?
    Providing context helps us come up with a solution that is most useful in the real world.
-->
What the change will fix is illustrated in https://codesandbox.io/s/ij7ux
The only thing that changes is the value of transform and it will not break the transition.
tested it in latest: chrome, safari and firefox. All have the same issue and behave the same with the fix.

## Your Environment 🌎
<!---
    Include as many relevant details about the environment with which you experienced the bug.
    If you encounter issues with typescript please include version and tsconfig.
-->

| Tech         | Version |
|--------------|---------|
| Material-UI  | v4.1.1  |
| React        | 16.8.6 |
| Browser      | chrome v74.0.3729.169 |
| react-beautiful-dnd        | 11.0.4 |



Issue discussion:
@gijsbotje Could it be a bug with react-beautiful-dnd? The transition is broken in https://codesandbox.io/s/ij7ux.
@oliviertassinari i mentioned below the button in that demo it is broken 😄 
I could try and destruct the drawer and make another demo, though a PR might be the easier way of showing it.
Though the animation is broken `translate(0px, 0px) === none` as it returns to its original transform position.
Would a PR be allright or do you wan't a working demo?
@gijsbotje I have tried the following diff:
```diff
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index 4ab37eb6a..d38dc5998 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -13,7 +13,7 @@ const GUTTER = 24;

 // Translate the node so he can't be seen on the screen.
 // Later, we gonna translate back the node to his original location
-// with `translate3d(0, 0, 0)`.`
+// with `transform: none;`.
 function getTranslateValue(direction, node) {
   const rect = node.getBoundingClientRect();

@@ -126,8 +126,8 @@ const Slide = React.forwardRef(function Slide(props, ref) {
       ...transitionProps,
       easing: theme.transitions.easing.easeOut,
     });
-    node.style.webkitTransform = 'translate(0, 0)';
-    node.style.transform = 'translate(0, 0)';
+    node.style.webkitTransform = 'none';
+    node.style.transform = 'none';
     if (onEntering) {
       onEntering(node);
     }
```

But it doesn't work on IE 11 (it does on Chrome, Edge, and Firefox).

What does https://github.com/atlassian/react-beautiful-dnd say about the transform problem?

Solution patch:
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -13,7 +13,7 @@ const GUTTER = 24;
 
 // Translate the node so he can't be seen on the screen.
 // Later, we gonna translate back the node to his original location
-// with `translate3d(0, 0, 0)`.`
+// with `none`.`
 function getTranslateValue(direction, node) {
   const rect = node.getBoundingClientRect();
 
@@ -41,7 +41,7 @@ function getTranslateValue(direction, node) {
   }
 
   if (direction === 'left') {
-    return `translateX(100vw) translateX(-${rect.left - offsetX}px)`;
+    return `translateX(${window.innerWidth}px) translateX(-${rect.left - offsetX}px)`;
   }
 
   if (direction === 'right') {
@@ -49,7 +49,7 @@ function getTranslateValue(direction, node) {
   }
 
   if (direction === 'up') {
-    return `translateY(100vh) translateY(-${rect.top - offsetY}px)`;
+    return `translateY(${window.innerHeight}px) translateY(-${rect.top - offsetY}px)`;
   }
 
   // direction === 'down'
@@ -126,8 +126,8 @@ const Slide = React.forwardRef(function Slide(props, ref) {
       ...transitionProps,
       easing: theme.transitions.easing.easeOut,
     });
-    node.style.webkitTransform = 'translate(0, 0)';
-    node.style.transform = 'translate(0, 0)';
+    node.style.webkitTransform = 'none';
+    node.style.transform = 'none';
     if (onEntering) {
       onEntering(node);
     }


Test patch:
diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js
--- a/packages/material-ui/src/Slide/Slide.test.js
+++ b/packages/material-ui/src/Slide/Slide.test.js
@@ -104,7 +104,7 @@ describe('<Slide />', () => {
 
       describe('handleEntering()', () => {
         it('should reset the translate3d', () => {
-          assert.match(handleEntering.args[0][0].style.transform, /translate\(0(px)?, 0(px)?\)/);
+          assert.match(handleEntering.args[0][0].style.transform, /none/);
         });
 
         it('should call handleEntering', () => {
@@ -251,7 +251,10 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `left` direction', () => {
         wrapper.setProps({ direction: 'left' });
         wrapper.setProps({ in: true });
-        assert.strictEqual(nodeEnterTransformStyle, 'translateX(100vw) translateX(-300px)');
+        assert.strictEqual(
+          nodeEnterTransformStyle,
+          `translateX(${global.innerWidth}px) translateX(-300px)`,
+        );
       });
 
       it('should set element transform and transition in the `right` direction', () => {
@@ -263,7 +266,10 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `up` direction', () => {
         wrapper.setProps({ direction: 'up' });
         wrapper.setProps({ in: true });
-        assert.strictEqual(nodeEnterTransformStyle, 'translateY(100vh) translateY(-200px)');
+        assert.strictEqual(
+          nodeEnterTransformStyle,
+          `translateY(${global.innerHeight}px) translateY(-200px)`,
+        );
       });
 
       it('should set element transform and transition in the `down` direction', () => {
@@ -296,7 +302,10 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `left` direction', () => {
         wrapper.setProps({ direction: 'left' });
         wrapper.setProps({ in: false });
-        assert.strictEqual(nodeExitingTransformStyle, 'translateX(100vw) translateX(-300px)');
+        assert.strictEqual(
+          nodeExitingTransformStyle,
+          `translateX(${global.innerWidth}px) translateX(-300px)`,
+        );
       });
 
       it('should set element transform and transition in the `right` direction', () => {
@@ -308,7 +317,10 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `up` direction', () => {
         wrapper.setProps({ direction: 'up' });
         wrapper.setProps({ in: false });
-        assert.strictEqual(nodeExitingTransformStyle, 'translateY(100vh) translateY(-200px)');
+        assert.strictEqual(
+          nodeExitingTransformStyle,
+          `translateY(${global.innerHeight}px) translateY(-200px)`,
+        );
       });
 
       it('should set element transform and transition in the `down` direction', () => {
@@ -373,7 +385,10 @@ describe('<Slide />', () => {
         style: {},
       };
       setTranslateValue('up', element);
-      assert.strictEqual(element.style.transform, 'translateY(100vh) translateY(-780px)');
+      assert.strictEqual(
+        element.style.transform,
+        `translateY(${global.innerHeight}px) translateY(-780px)`,
+      );
     });
 
     it('should do nothing when visible', () => {