Responsive layout excluding css @media at specific px size

[RyanTibbetts-OnScale]

Bug Report

What is the expected behavior?

I have two div's, one that is <div fxShow fxHide.xs></div> or <div fxShow fxHide.lt-sm></div> and one that is <div fxShow fxHide.gt-xs></div>. At 600px screen width there should be a div present.

What is the current behavior?

At exactly 600px screen width there is nothing showing.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-flex-layout-seed-153fhh

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

You shouldn't have nothing in between things, I haven't tested this for other similar values, but I imagine it's true everywhere.

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

I did this on 7 and whatever version the stackblitz seed is.

Is there anything else we should know?

This is probably happening for all similar hide/show combinations. Might need a hotfix.

[RaphaelGuimaraes]

I'm having this same problem with 960px. The problem must be on the intersections points.

[btroncone]

Same issues at 960px, checked back to previous version I was using (7.0.0-beta.19) and this was working fine. From what I can tell the problem occurs at 599px 600px, 959px 960px, etc. This seems to be a fairly substantial problem as some tablets sit at exactly these dimensions in portrait / landscape.

[CaerusKaru]

Was this fixed by #1075? Can someone confirm by building with the nightly Flex Layout builds?

[btroncone]

@CaerusKaru Based off the nightly build this does not appear to be fixed. For instance, I'm still seeing inconsistencies at 959px vs behavior in 7.0.0-beta.19.