custom breakpoint xs fails if min-width: 0px not specified

[alexfung888]

Bug Report

What is the expected behavior?

when screen is smaller than max-width: 599.99px, media observer should next() xs.

What is the current behavior?

The changes array has LT-SM LT-MD, LT-LG and LT-XL, but without XS itself.

What are the steps to reproduce?

StackBlitz(https://stackblitz.com/edit/angular-flex-layout-breakpoint)

The changes$ array is displayed on screen. Adjust your output window to below 600px. It only shows

"LtSm"
"LtMd"
"LtLg"
"LtXl"

If you modify the my-break.points.module.ts to swap the two lines in the xs definition:

from
        mediaQuery: 'screen and (max-width: 599.99px)',
        // mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.99px)',
to
        // mediaQuery: 'screen and (max-width: 599.99px)',
        mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.99px)',

then XS will be detected correctly and displayed on screen.

"Xs"
"LtSm"
"LtMd"
"LtLg"
"LtXl"

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

it is uncommon to specify min-width: 0px

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

flex-layout 7.0.0-beta.24
Angular 7.2.12
cdk 7.3.7
OS Windows 10
TS 311 and 324
browser Chrome

Is there anything else we should know?

[CaerusKaru]

What's interesting about this is that at first glance, the behavior is non-deterministic. If you resize slowly, you will actually see Xs below 600px, but not every time.

My question is: does this impact anything other than MediaObserver?

[CaerusKaru]

Duplicate of #1059

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