Components: Md-Sidenav open mode bootstrap animation

[jsorr2]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When using universal, the sidenav (in side mode) will be rendered already open in the initial page load, and then when the app bootstraps, it will stay open.

What is the current behavior?

The initial pre-rendered page loads with the sidenav closed, and then when the app boostraps, the sidenav animates open.

What is the use-case or motivation for changing an existing behavior?

In beta 8, it worked perfectly. The initial pre-rendered html file aligned with the bootstrap re-render.
Now, the page loads with the sidenav closed, and after a number of seconds later (when the app bootstraps) the sidenav suddenly animates open, which is quite distracting.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.3, material 2.0.0-beta8, windows 10

[CaerusKaru]

The problem here is actually deeper than anticipated. See here:

https://github.com/angular/material2/blob/20a23f16e8ac1ced29172709cc837fa500b6377b/src/lib/sidenav/drawer.ts#L347-L350

https://github.com/angular/material2/blob/20a23f16e8ac1ced29172709cc837fa500b6377b/src/lib/sidenav/drawer.ts#L553-L585

Since the margins for the mat-drawer-content depend on elements that haven't been rendered yet, Universal can't possibly predict the width, leaving it static at 0, and populated on bootstrap on the client. The "animation" is really just the transition CSS firing once the width is populated. At least that's my theory, it all depends on how Angular (and Universal) constructs the application in order (since I think Universal just gives it one go)

@mmalerba Is there a possible refactoring we can do here, maybe by searching the element tree for CSS width if none other is available?

[CaerusKaru]

As documented in #7795, there's also an issue with transform: translate3d(0,0,0) not being applied correctly.

[CaerusKaru]

There's also currently an issue open https://github.com/angular/angular/issues/19235 that is tracking an issue with style.property not being applied correctly if the property name is in camelCase (in drawer, this is marginRight and marginLeft).

[mmalerba]

should be fixed by #8488

[CaerusKaru]

@mmalerba Issue not resolved by #8488

[CaerusKaru]

@crisbeto Still not fixed

[algcifaldi]

As far as I can tell, this is still happening in the latest release. Is #8969 the new issue to track for status updates?

[agustinhaller]

Hi, any updates on this? In my case it was working OK with Angular 5.0.2 and material 5.0.0.rc0 but stop working when updated to Angular 5.2.8 and material 5.2.4

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}