Basic Responsive Grid App Demo Breakpoint Issue

[covuworie]

Bug Report

What is the expected behavior?

When the gt-sm breakpoint is hit the grid layout should be:

header header header | sidebar content sidebar2 | footer footer footer

What is the current behavior?

When the gt-sm breakpoint is hit the grid layout is incorrectly:

"header header | sidebar content | sidebar2 sidebar2 | footer footer

This is the sm value.

What are the steps to reproduce?

1. Go to the Basic Responsive Grid App in the grid demo apps. The corresponding grid layout code is here.
2. Put your screen in xs mode. You will see the layout is correct at this point.
3. Increase the screen size to sm. You will see the layout is still correct at this point.
4. Increase the screen size to gt-sm. You will see the layout remains unchanged which is incorrect.
5. Refresh the browser. You will see the layout changes to the correct value.

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

It seems like a bug. I have also noticed similar asymmetric behavior with flexLayout. I first thought it was my incorrect use of the responsive API. However, after seeing similar behavior in the demo app, I'm convinced it's a bug now. The correct layout only seems to appear on first initialization. When the screen is resized and the breakpoint is hit, the screen does not always adjust correctly.

I have just seen the same bug for flex Layout in the Responsive Layout Directions demo. The code is here. Similar behavior for Responsive Flex Directives on that page.

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

I presume the demo app is using the latest version of Angular.

Is there anything else we should know?

No

[ViktorReib]

I noticed the same behavior with my application, is there a workaround for this?

[CaerusKaru]

We're going to be tackling the investigation into this as part of #1059, which is the same overarching issue. I agree it's annoying, and so far the root cause is proving just as annoying to pin down.

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