breakpointObserver incorrectly emits when resizing

[literalpie]

What is the expected behavior?

If multiple breakpoints are provided, the observer should only emit "false" if neither breakpoint is matched

What is the current behavior?

If multiple breakpoints are provided and quick resizing occurs, the observer sometimes emits "false" despite the size never leaving the matched range.

What are the steps to reproduce?

in this stackblitz, resize the window quickly at around 600px width. If you never go over the "Small" breakpoint size, the results of "betterLargeMatches" (which uses a single query) does not increment, but the value of largeMatches does sometimes increment.

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

Reproduced in Safari and Chrome on MacOS, using CDK 7.3.x and Angular 7.2.x. I have not tested with other versions.

Is there anything else we should know?

This issue is particularly bad when a layout change happens based on the breakpoint observer, and if that layout change involves adding or removing components. For example, I found this bug in a layout that has two columns at large sizes, but a mat-tab component at small sizes. This bug caused the mat-tab to reinitialize when the window was resized from XSmall to Small, which caused the state of the currently active tab to be lost.

The workaround is to create a single query that encompasses both queries (as shown in the stackblitz)

[literalpie]

I believe this issue was closed in #15964. Here is the update stackblitz which shows the issue is no longer present.

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