show-for() and hide-for() gap at exact width of breakpoint

[Lazerproof]

How to reproduce this bug:

$breakpoints: (
      small: 0,
      medium: 568px,
      xxmedium: 940px,
      large: 1024px,
      xlarge: 1200px,
      xxlarge: 1440px,
);

.a {
  @include hide-for(xxmedium);
}

.b {
  @include show-for(xxmedium);
}

At 940px both element are visible. So implementation of hide-for() should be changed to $breakpoint-value - 1.

[ncoden]

Thank you @Lazerproof for your bug reports ;) .
I'm working on it.

[ncoden]

See https://codepen.io/ncoden/pen/PEbGYR
This happens when the browser font-size is smaller than 16px. The gap of 1/16em (so 1px) between the two breakpoints become 0.625px and the max limit of the lower breakpoint is round to the upper pixel.

I'll search why the breakpoint sizes are set in em, and what unit we could use to fix this.

[JeremyEnglert]

@ncoden - think we can squeeze this into the upcoming release?

[ncoden]

Yes. Fixing this issue would require to use pixels instead of em/rem for grids. This is a major change.