The Wayback Machine - https://web.archive.org/web/20200705134046/https://github.com/angular/flex-layout/issues/1159
Skip to content

/ flex-layout

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
viv-dev opened this issue Dec 16, 2019 · 2 comments
Open

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

viv-dev opened this issue Dec 16, 2019 · 2 comments

Comments

@viv-dev
Copy link

@viv-dev viv-dev commented Dec 16, 2019

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
Copy link

@non4me non4me commented Jan 27, 2020

Same problem I have in chrome with custom media points.
@fsomme2s
Copy link

@fsomme2s fsomme2s commented Feb 20, 2020

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
3 participants
@non4me @fsomme2s @viv-dev
You can’t perform that action at this time.