Max widths of certain breakpoints does not match any window BreakpointState

[datariomj]

Bug, feature request, or proposal:

Bug: Max widths does not match any window BreakpointState

What is the expected behavior?

• width of 599 should be true on BreakpointState.XSmall
• width of 1279 should be true on BreakpointState.Medium
• width of 1919 should be true on BreakpointState.Large

What is the current behavior?

• width of 599 doesn't match any BreakpointState
• width of 1279 doesn't match any BreakpointState
• width of 1919 doesn't match any BreakpointState

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-breakpoints-states

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

Angular: v7.0.0
Material: v7.0.0
Typescript: v3.1.3
OS: Windows 10
Browser: Version 69.0.3497.100 (Official Build) (64-bit)

Is there anything else we should know?

Please use the Open in New Window feature of stackblitz to view this issue.

[manklu]

Media queries use the viewport, not the window size.

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.windowWidth = window.innerWidth;
  }

[datariomj]

Media queries use the viewport, not the window size.

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.windowWidth = window.innerWidth;
  }

Ok thanks. The stackblitz code was updated, and all the states still returns false.

[manklu]

For me it works. Have you tried a separate window? It's easier to change the size and observe the breakpoints.

[josephperrott]

Can you provide a different reproduction? Using your stackblitz, it appears to work as expected:

[datariomj]

Tried this on another pc and it's working. I think the issue is if the scale of the display is not in 100%.

[manklu]

You can also reproduce this with zoom to 150%.

If the unscaled width is 899px and you zoom to 150%, all values are false. Looks like a rounding problem to me.

899 / 1.5 = 599.33 which is greater than 599 and lower than 600.

Same with Firefox and Edge.

Edit: Seems to be an old problem.
http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem
twbs/bootstrap#19197

[manklu]

@josephperrott
Until Media Queries Level 4 are available you can minimize the problem by using subpixel queries. Something like

@media (max-width: 599.999999999px) {
  .redfont {
    color: red;
  }
}

https://stackblitz.com/edit/angular-material2-issue-breakpoints-states-pf5zlw

[datariomj]

Yep, thanks for the help. Closing this issue 👍

[manklu]

@datariomj Leave it open since there is a possibility to minimize the problem.

[datariomj]

Reopened. Can we change the label to something else instead of cannot reproduce?