[LeftNav] Fix sidebar position for browsers that don't support transform3d #1269
Conversation
|
@Andrew8xx8 actually, with the fix, the behavior in modern browsers is quite different: the closing animation is broken, and the swipe to open feature doesn't work properly. transform: translateX(50px);
transform: translate3d(50px, 0, 0);I don't remember whether it's possible to supply two values using material-ui's custom CSS-in-JS framework, and I'm not sure to what extent IE9 supports 2d transforms, but this may be something to try. |
|
@Andrew8xx8 Is there any way to detect for IE9 and only apply your fix in that case? |
|
@hai-cea Maybe we can use Modernizr.csstransforms3d here. |
|
|
||
| if (!Modernizr.csstransforms3d) { | ||
| styles.root.left = x + 'px'; | ||
| } |
There was a problem hiding this comment.
You can move this into the style declaration:
left: Modernizr.csstransforms3d ? 0 : x + 'px',
| @@ -101,7 +104,7 @@ let LeftNav = React.createClass({ | |||
| width: this.getTheme().width, | |||
| position: 'fixed', | |||
| zIndex: 10, | |||
| left: 0, | |||
| left: Modernizr.csstransforms3d ? 0 : x + 'px', | |||
There was a problem hiding this comment.
| @@ -101,7 +104,7 @@ let LeftNav = React.createClass({ | |||
| width: this.getTheme().width, | |||
| position: 'fixed', | |||
| zIndex: 10, | |||
| left: 0, | |||
| left: Modernizr.csstransforms3d ? 0 : x, | |||
There was a problem hiding this comment.
I think you have to account for isBrowser as well:
left: isBrowser && Modernizr.csstransforms3d ? 0 : x,
|
@hai-cea fixed |
[LeftNav] Fix sidebar position for browsers that don't support transform3d
|
Thanks @Andrew8xx8 @pomerantsev ! |
|
|
LeftNav is not hidden in IE9. This small improvement solves problem for IE9 and probably for other browsers that don't support transfor3d. This improvement doesn't change the LeftNav behavior in modern browsers.