Both sm and xs breakpoints are active when screen width is 600px

Bug Report

What is the expected behavior?

I believe xs is supposed to kick in at 599px so I’d expect that only sm would be active at this point.

What is the current behavior?

Both sm and xs are active.

What are the steps to reproduce?

<div fxHide fxShow.gt-xs>fxHide fxShow.gt-xs</div>
<div fxHide fxShow.sm>fxHide fxShow.sm</div>
<div fxHide fxShow.xs>fxHide fxShow.xs</div>

When viewport width is exactly 600px all of these elements will display.

Example here: https://stackblitz.com/edit/angular-flex-layout-seed-aojwqc

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

Having both breakpoints active can lead to unexpected renders.

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

All as far as I know.

Is there anything else we should know?

Nope.

[k0hamed]

@CaerusKaru No problem, I’ll submit a PR with this fix.

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