[Chrome] MediaObserver asObservable() emit wrong events on breakpoints

Bug Report

What is the expected behavior?

When I resize the screen from 959px to 960px, MediaObserver.asObservable() should emit a MediaChange event with mqAlias=“md”

What is the current behavior?

When I resize the screen from 959px to 960px, MediaObserver.asObservable() emits (among others) 2 MediaChange events with mqAlias=“md” and mqAlias=“sm”

What are the steps to reproduce?

A component with

public ngOnInit() {
    this.watcher = this.mediaObserver.asObservable()
      .subscribe((changes: MediaChange[]) => {
        console.log(changes)
      })
}

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

When I resize slowly, MediaObserver.media$ does not always emit an event when breakpoints are crossed. I think it may be related.

Is there anything else we should know?

It may be related to the recent changes about the breakpoints (i.e. max-width: 959.99 instead of 959) fxLayout version: 7.0.0-beta.24

[PapaNappa]

Same here.

This is my code

mediaObserver.asObservable().subscribe(changes => {
  console.log(changes.map(c => c.mqAlias));
});

In Chrome, when I resize fast (from lg to md and back), I get the following outputs

(5) ["lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # after page load
(5) ["md", "lt-lg", "lt-xl", "gt-sm", "gt-xs"] # after making window smaller
(5) ["md", "lt-lg", "lt-xl", "gt-sm", "gt-xs"] # same event at the same time
(5) ["lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # after making window larger
(5) ["lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # same event at the same time

This is expected (except that all events are emitted twice).

When resizing slowly, I get the following outputs

(5) ["lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # after page load
(7) ["md", "lt-lg", "lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # after making window smaller
(7) ["md", "lt-lg", "lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # same event at the same time
(7) ["md", "lt-lg", "lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # after making window larger
(7) ["md", "lt-lg", "lg", "lt-xl", "gt-md", "gt-sm", "gt-xs"] # same event at the same time

As you can see, both “md” and “lg” are reported.

In Firefox, things get even weirder:

Array(5) [ "lg", "lt-xl", "gt-md", "gt-sm", "gt-xs" ] # after page load
Array(4) [ "lt-lg", "lt-xl", "gt-sm", "gt-xs" ] # after making window smaller
Array(5) [ "md", "lt-lg", "lt-xl", "gt-sm", "gt-xs" ] # second yet different event at the same time
Array(6) [ "md", "lt-lg", "lt-xl", "gt-md", "gt-sm", "gt-xs" ] # after making window larger
Array(7) [ "md", "lt-lg", "lg", "lt-xl", "gt-md", "gt-sm", "gt-xs" ] # second yet different event at the same time

First, when making the window smaller, no ‘single’ mqAlias is reported, but only ranges. In contrast to the initial result, the “lg” and “gt-md” aliases are removed, but only the “lt-lg” alias is added. I would expect that also the “md” alias is added.

Then right after the first event, a second event gets fired with the correct “md” alias added.

When making the window larger, the “gt-md” alias is added, but not the “lg” alias. The “md” alias is not removed. I would expect that “md” would also be removed and “lg” would be added.

Then right after the first event, a second event gets fired with the “lg” alias added, but the “md” alias is still not removed.

[CaerusKaru]

I’ve filed a ticket with the Chromium team, and they’ve identified the root cause and assigned priority to the case, which hopefully means we can get this addressed in one of the next major versions.

Tracking: https://bugs.chromium.org/p/chromium/issues/detail?id=1285532 (please do not spam the ticket)