fix(core): update breakpoint ranges to remove subpixel gaps (#1004)

In rare cases, browsers resizing may create viewports with subpixel values.
Previous mediaQueries had 1 pixel gaps where the bounding ranges do not match.

Update the `max-width` values to include subpixel values and eliminate 99.99% of all gaps.

Fixes #1001.

Author: ThomasBurleson

src/lib/core/breakpoints/data/break-points.ts

@@ -13,52 +13,52 @@ import {BreakPoint} from '../break-point';
 export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
   {
     alias: 'xs',
-    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599px)',
+    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.9999px)',
     priority: 1000,
   },
   {
     alias: 'sm',
-    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959px)',
+    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.9999px)',
     priority: 900,
   },
   {
     alias: 'md',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279px)',
+    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.9999px)',
     priority: 800,
   },
   {
     alias: 'lg',
-    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.9999px)',
     priority: 700,
   },
   {
     alias: 'xl',
-    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.9999px)',
     priority: 600,
   },
   {
     alias: 'lt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 599px)',
+    mediaQuery: 'screen and (max-width: 599.9999px)',
     priority: 950,
   },
   {
     alias: 'lt-md',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 959px)',
+    mediaQuery: 'screen and (max-width: 959.9999px)',
     priority: 850,
   },
   {
     alias: 'lt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1279px)',
+    mediaQuery: 'screen and (max-width: 1279.9999px)',
     priority: 750,
   },
   {
     alias: 'lt-xl',
     overlapping: true,
     priority: 650,
-    mediaQuery: 'screen and (max-width: 1919px)',
+    mediaQuery: 'screen and (max-width: 1919.9999px)',
   },
   {
     alias: 'gt-xs',

src/lib/core/media-observer/media-observer.spec.ts

@@ -181,7 +181,7 @@ describe('media-observer', () => {
   describe('with custom BreakPoints', () => {
     const gtXsMediaQuery = 'screen and (min-width:120px) and (orientation:landscape)';
     const superXLQuery = 'screen and (min-width:10000px)';
-    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.9999px)';
 
     const CUSTOM_BREAKPOINTS = [
       {alias: 'slate.xl', priority: 11000, mediaQuery: superXLQuery},
@@ -236,7 +236,7 @@ describe('media-observer', () => {
   });
 
   describe('with layout "print" configured', () => {
-    const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279px)';
+    const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279.9999px)';
 
     beforeEach(() => {
       // Configure testbed to prepare services
@@ -288,7 +288,7 @@ describe('media-observer', () => {
   });
 
   describe('with layout print NOT configured', () => {
-    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.9999px)';
 
     beforeEach(() => {
       // Configure testbed to prepare services

src/lib/core/sass/_layout-bp.scss

@@ -5,23 +5,23 @@
 $breakpoints: (
   xs: (
     begin: 0,
-    end: 599px
+    end: 599.9999px
   ),
   sm: (
     begin: 600px,
-    end: 959px
+    end: 959.9999px
   ),
   md: (
     begin: 960px,
-    end: 1279px
+    end: 1279.9999px
   ),
   lg: (
     begin: 1280px,
-    end: 1919px
+    end: 1919.9999px
   ),
   xl: (
     begin: 1920px,
-    end: 5000px
+    end: 4999.9999px
   ),
 ) !default;
 
@@ -39,10 +39,10 @@ $overlapping-gt: (
 // Material Design breakpoints
 // @type map
 $overlapping-lt: (
-  lt-sm: 599px,
-  lt-md: 959px,
-  lt-lg: 1279px,
-  lt-xl: 1919px,
+  lt-sm: 599.9999px,
+  lt-md: 959.9999px,
+  lt-lg: 1279.9999px,
+  lt-xl: 1919.9999px,
 ) !default;