Reconsider margin transition on sidenav

[jadjoubran]

• Do you want to request a feature or report a bug?
  Bug
• What is the current behavior?
  Poor performance for sidenav toggle transition
• **If the current behavior is a bug,
  @jelbourn's material2 demo and sidenav template show that transition is targeting margin-left.
• What is the expected behavior?
  I would expect animating transform: translateX unless there's a reason that I missed
• What is the motivation / use case for changing the behavior?
  Smoother toggle transition
• Which version of Angular and Material, and which browser and OS does this issue affect?
  Material alpha 4
• Other information
  I would love to fix this if you agree
  Thanks!

[sebakerckhof]

The sidenav already animates using transform: translateX. However, the main content is animated using margin-left, which changes the width of the container and can result in poor performance.
But using translate there would not have the same behavior. One does actually want the width to change.

I think a good middle ground is the way google inbox does it. They animate the side bar, but they don't animate the main content. So the side nav slides in using a transform, but the width of the main content does not animate, but just jumps back and forth.

[jelbourn]

@hansl The sidenav is only animating the content element's margin when in side mode, right?

[hansl]

Yes, but we still set the transition: margin... property on the content even if it's not in side mode.

[jelbourn]

Shouldn't make a difference as long as it's not actually changing the margin, though, right?

[hansl]

That was the rationale, but I don't remember how much research I did on that subject.

[jelbourn]

@jadjoubran The margin should only be animating in side mode where changing the size of the content is desired. If you observe this happening in over or push mode, let us know. For now it seems like everything is working as intended.

[sebakerckhof]

In the demo app the margin does change on the md-content element when the side nav opens.

It is indeed necessary that the margin changes in side mode. But I think @jadjoubran argues that animating the margin is cpu-heavy and therefore not desirable.
I argue that you could do like google inbox does it.

[jadjoubran]

Yeah, what @sebakerckhof said

[jelbourn]

We took out some test devices and did find that the relayouts in the side mode were indeed somewhat janky. Going to poke around with it.

[jadjoubran]

@jelbourn sounds great! It's actually visible on my macbook pro
Anyway, ping me if I can help

[jimjamdev]

Have you looked at calc?

i.e width: calc(100vw - $sidebarWidthVar)

[sebakerckhof]

It's about animation performance, so I don't see where calc would help here. + I think the components should be as composable / nestable as possible, so I think it should not rely on viewport units.

[jadjoubran]

@jelbourn Thanks for the fix! But animating with left will still be slow :/
The browser is recalculating style & layout everytime you change the left and the animation won't be as smooth as when you animate with transform translate
Codepen
Add a few macbooks and see the performance hit.. and then change left: 200px to transform: translateX(200px)

I can submit a PR if you want 😄

[jelbourn]

Ah, I didn't notice that it wasn't already using translateX for the content. @robertmesserle want to do a quick change?

[robertmesserle]

@jelbourn Sure - going to use translate3d() since it's faster in most browsers.

[angular-automatic-lock-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.}