CDK BreapointObserver emits multiple 'true' for differents sizes of screen

[johanchouquet]

Reproduction

Steps to reproduce:

1. Write this code in a service, then subscribe. See in console.

isLandscape$: Observable<boolean> = this.breakpointObserver.observe(['(orientation: portrait)', '(orientation: landscape)']).pipe(
    map((result: BreakpointState) => {
      console.log('result', result);
      return result.matches;
    })
  );
screenSizes$: Observable<boolean> = this.breakpointObserver
    .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
    .pipe(
      map((result: BreakpointState) => {
        console.log('result', result);
        return result.matches;
      })
    );

Expected Behavior

What behavior were you expecting to see?

I'm expecting to get only 1 condition set to true for media queries defined in the CDK.

Actual Behavior

What behavior did you actually see?

My browser is 1903px wide. The 1st time i load the page, I see in the console the Large and XLarge conditions set to true:

(min-width: 1280px) and (max-width: 1919.99px): true
(min-width: 1920px): true

Then, when I resize my window, this time, the CDK emits only (min-width: 1280px) and (max-width: 1919.99px): true.

The same type of error occurs screen when I first get to 'xs' screen by resizing the window: 2 conditions set to true (for Small & XSmall screen sizes):

(max-width: 599.99px): true
(min-width: 600px) and (max-width: 959.99px): true

Then, when I resize again my window, i only get (max-width: 599.99px): true.

ALSO:

When i reload the page in 'xs' size, I get the right values set for both isLandscape & Screen size.
But when i resize the page, I get:

breakpoints: {
(orientation: landscape): false
(orientation: portrait): false
}
matches: false

I also get a no match from times to times for the screen sizes...

So, that's just not possible.

• The CDK should be able to emit that I'm still in portrait mode,
• the CDK should be able to detect my screen size any time.

Environment

• Angular: 8.0.0
• CDK/Material: 8.0.0
• Browser(s): Chrome 76
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[blyndcide]

This behavior can be demoed at https://material2-dev.firebaseapp.com/screen-type. Multiple screen types are seen as true on a desktop screen at widths 1280px, 840px, and 600px.

The problem didn't occur until this change:
#13828