MediaObserver on Firefox doesn't correctly detect view-port change when maximizing window

[viv-dev]

Bug Report

What is the expected behavior?

When maximizing a window, the media observer should detect the change in view port width and report the correct query matches.

What is the current behavior?

On Firefox (71.0 64 bit) - when maximizing the window, the media observer reports a conflicting set of query matches, with the original size reported first, as per the below example:

[
  {
    "matches": true,
    "mediaQuery": "screen and (min-width: 0px) and (max-width: 599.9px)",
    "mqAlias": "xs",
    "suffix": "Xs",
    "priority": 1000,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (max-width: 599.9px)",
    "mqAlias": "lt-sm",
    "suffix": "LtSm",
    "priority": 950,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (max-width: 959.9px)",
    "mqAlias": "lt-md",
    "suffix": "LtMd",
    "priority": 850,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (max-width: 1279.9px)",
    "mqAlias": "lt-lg",
    "suffix": "LtLg",
    "priority": 750,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (max-width: 1919.9px)",
    "mqAlias": "lt-xl",
    "suffix": "LtXl",
    "priority": 650,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (min-width: 1920px) and (max-width: 4999.9px)",
    "mqAlias": "xl",
    "suffix": "Xl",
    "priority": 600,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (min-width: 1920px)",
    "mqAlias": "gt-lg",
    "suffix": "GtLg",
    "priority": -650,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (min-width: 1280px)",
    "mqAlias": "gt-md",
    "suffix": "GtMd",
    "priority": -750,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (min-width: 960px)",
    "mqAlias": "gt-sm",
    "suffix": "GtSm",
    "priority": -850,
    "property": ""
  },
  {
    "matches": true,
    "mediaQuery": "screen and (min-width: 600px)",
    "mqAlias": "gt-xs",
    "suffix": "GtXs",
    "priority": -950,
    "property": ""
  }
]

When resizing the window manually by clicking and dragging the edge of the window, this does not occur.

What are the steps to reproduce?

Simply add this section of code to a project and observe the printed array when maximising a window in Firefox.

    this.mediaSubscription$ = this.mediaObserver
      .asObservable()
      .subscribe((change: MediaChange[]) => {
        console.log(change);
      });

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

Mobile styling dependent on the observer aren't being cleared on window re-size.

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

I've only tested it in Firefox (71.0 64 bit). Chrome seems to handle the window resizing fine.

The versions of angular libraries I am using are below:

  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "rxjs": "~6.5.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

[non4me]

Same problem I have in chrome with custom media points.

[fsomme2s]

MediaObserver on Firefox seems to be a bit buggy in general, see first comment in #1059
We experience strange MediaObserver Behaviour in Firefox, too. With both, the new asObservable() method, and the deprecated "media$" method

[CaerusKaru]

Collapsing into #1059. If we do not fix this as part of that, feel free to comment here and we can reopen.

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