bug(sidenav): "Ghost" scrollbar appears in Chrome when sidenav container is a flex child

[kherock]

Bug:

"Ghost" scrollbar appears in Chrome when sidenav container is a flex child

What is the expected behavior?

The scrollable content within sidenavs should behave properly on all browsers.

What is the current behavior?

What are the steps to reproduce?

https://run.plnkr.co/plunks/nWa04wNNNhy0AjwFg7HS/

Create a sidenav layout where sidenav-container is the child of a flex container. Changing the zoom level will cause Chrome to create space for a scrollbar, though no scrollbar actually shows up:
(editor: https://embed.plnkr.co/nWa04wNNNhy0AjwFg7HS/)

The extra space will not go away until something makes Chrome repaint the area.

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

Though the scenario I've set up above may seem contrived, I'm sometimes experiencing the ghost scrollbars outside of zoom level changes, such as when I'm switching between routes that load and unload the view with the sidenav container.

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

Tested on Angular Material 2 beta 8, Chrome 59, Windows 10.

I'll be checking if the same is true in Safari or Chrome on macOS when I have a chance, since they're also WebKit.
Edge/IE11 and Firefox are fine.

Is there anything else we should know?

I'm 99% sure this is a bug in Chrome but I haven't been able to find any documentation of it myself. Here's a plunker with the minimum amount markup I could manage to reproduce:
https://run.plnkr.co/plunks/AMq5g5qaKJMUTjwNulkF/

It seems the exact cause is in the following relationship:

div(style="display: flex;")
    div(style="flex: 1; position: relative;")
        div(style="position: absolute; overflow-y: auto; height: %;")
            //... children here won't render properly

or

div(style="display: flex;")
    div(style="flex: 1;")
        div(style="height: %; position: relative;")
            div(style="position: absolute; overflow-y: auto; height: %;")
                //... children here won't render properly

They key here is that the container with relative position has a percentage-based height relative to the flex child. Absolutely positioned descendants of this container behave badly when they also have a percentage-based height.

[kherock]

Interestingly this was never a problem on Angular Material 1.x. I was just playing around with it and I discovered that setting display: flex (with flex-direction: column) on the md-sidenav component corrects the issue! Note there is still some odd behavior associated with the element, e.g. setting a child with width: 100% will still result in the empty space.

However I'm still interested in seeing this get fixed in Chrome, hopefully someone more knowledgeable than me here can help me with that.

[mmalerba]

Yep, appears to be a Chrome issue, filed a bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=787628

[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.}