Material: sidenav: when opened, mobile screen is rumpled

[hagfish1210]

Actual Behavior:

• What is the issue? md-sidenav doesn't work normally.
• What is the expected behavior? right md-sidenav have to be opened smoothly. without screen abnormality

< problem image >

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/hagfish1210/pen/WxWomk
• Details: not totally same with the problem, but similar movement.

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.0.9

Additional Information:

• Browser Type: chrome
• Browser Version: 52.0.2743.116 (64-bit)
• OS: ubuntu 14.04lts
• Stack Traces:

[ThomasBurleson]

This will be fixed with the SideNav re-implementation using $mdPanel.

[clshortfuse]

I took the supplied codepen and noticed the CSS was causing issues with the layout. I believe that was the issue and you can the modifications I made to fix it here: http://codepen.io/shortfuse/pen/ALgEdb

If in fact there is an animation issue, I couldn't reproduce it with the supplied codepen. Regardless, #9833 might solve the animation issue.

[yeager-j]

I have this issue as well. Solution posted by @clshortfuse has not fixed the problem.

[rollermy]

Any update on this? I have this issue too

[johnmc5810]

Have this issue too, any work arounds available?

[rollermy]

I disabled the animation. I decided to not use the right nav in the end, but i think this worked:

.right-nav {
  -webkit-transition: none !important;
  transition: none !important;
}

[Splaktar]

The URLs for the images used in the demo reproductions are now 404s. I can't reproduce this given the provided information. If this is still an issue for you, please open a new issue with an updated CodePen reproduction and link to this issue.