fix(core): set fractional breakpoints to .98 instead of .9 (#1308)

Setting the breakpoint value to .9 leads the browser to incorrectly round-up and cause overlap with fractional pixels and their upper bound. This leads to unintended consequences in downstream consumers like our MediaObserver and MatchMedia providers.
angular · Nov 12, 2020 · c1c545c · c1c545c
1 parent 4bb2c92
commit c1c545c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/src/lib/core/breakpoints/data/break-points.ts b/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: 599.9px)',
+    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.98px)',
     priority: 1000,
   },
   {
     alias: 'sm',
-    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.9px)',
+    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.98px)',
     priority: 900,
   },
   {
     alias: 'md',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.9px)',
+    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.98px)',
     priority: 800,
   },
   {
     alias: 'lg',
-    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.9px)',
+    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.98px)',
     priority: 700,
   },
   {
     alias: 'xl',
-    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.9px)',
+    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.98px)',
     priority: 600,
   },
   {
     alias: 'lt-sm',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 599.9px)',
+    mediaQuery: 'screen and (max-width: 599.98px)',
     priority: 950,
   },
   {
     alias: 'lt-md',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 959.9px)',
+    mediaQuery: 'screen and (max-width: 959.98px)',
     priority: 850,
   },
   {
     alias: 'lt-lg',
     overlapping: true,
-    mediaQuery: 'screen and (max-width: 1279.9px)',
+    mediaQuery: 'screen and (max-width: 1279.98px)',
     priority: 750,
   },
   {
     alias: 'lt-xl',
     overlapping: true,
     priority: 650,
-    mediaQuery: 'screen and (max-width: 1919.9px)',
+    mediaQuery: 'screen and (max-width: 1919.98px)',
   },
   {
     alias: 'gt-xs',

diff --git a/src/lib/core/breakpoints/data/orientation-break-points.ts b/src/lib/core/breakpoints/data/orientation-break-points.ts
@@ -9,11 +9,11 @@
 import {BreakPoint} from '../break-point';
 
 /* tslint:disable */
-const HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599.9px)';
-const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959.9px)';
+const HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599.98px)';
+const HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959.98px)';
 
-const TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839.9px)';
-const TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px) and (max-width: 1279.9px)';
+const TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839.98px)';
+const TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px) and (max-width: 1279.98px)';
 
 const WEB_PORTRAIT      = '(orientation: portrait) and (min-width: 840px)';
 const WEB_LANDSCAPE     = '(orientation: landscape) and (min-width: 1280px)';

diff --git a/src/lib/core/match-media/mock/mock-match-media.spec.ts b/src/lib/core/match-media/mock/mock-match-media.spec.ts
@@ -259,13 +259,13 @@ describe('mock-match-media', () => {
   it('activates overlapping breakpoints correct', () => {
     mediaController.activate('xs', true);
     expect(mediaController
-      .isActive('screen and (min-width: 0px) and (max-width: 599.9px)'))
+      .isActive('screen and (min-width: 0px) and (max-width: 599.98px)'))
       .toBe(true);
     expect(mediaController
-      .isActive('screen and (min-width: 600px) and (max-width: 959.9px)'))
+      .isActive('screen and (min-width: 600px) and (max-width: 959.98px)'))
       .toBe(false);
     expect(mediaController
-      .isActive('screen and (max-width: 599.9px)'))
+      .isActive('screen and (max-width: 599.98px)'))
       .toBe(true);
   });
 });
diff --git a/src/lib/core/media-observer/media-observer.spec.ts b/src/lib/core/media-observer/media-observer.spec.ts
@@ -178,7 +178,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: 959.9px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.98px)';
 
     const CUSTOM_BREAKPOINTS = [
       {alias: 'slate.xl', priority: 11000, mediaQuery: superXLQuery},
@@ -233,7 +233,7 @@ describe('media-observer', () => {
   });
 
   describe('with layout "print" configured', () => {
-    const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279.9px)';
+    const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279.98px)';
 
     beforeEach(() => {
       // Configure testbed to prepare services
@@ -285,7 +285,7 @@ describe('media-observer', () => {
   });
 
   describe('with layout print NOT configured', () => {
-    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.9px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959.98px)';
 
     beforeEach(() => {
       // Configure testbed to prepare services