From f1ac9b3d150412b88549ac4a6a14b71693869369 Mon Sep 17 00:00:00 2001 From: tomrlq Date: Fri, 23 Oct 2020 08:55:39 +0800 Subject: [PATCH] fix(cdk/layout): decrease breakpoint upper bounds The previous breakpoint upper bounds use `.99` for the fractional components of upper bounds. However, this seems to cause browser to round up to the next pixel, creating an overlap for these values. Changing to `.98` fixes this. Fixes angular/components#20850 --- src/cdk/layout/breakpoints.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/cdk/layout/breakpoints.ts b/src/cdk/layout/breakpoints.ts index 233c6c00f488..40ce4c084126 100644 --- a/src/cdk/layout/breakpoints.ts +++ b/src/cdk/layout/breakpoints.ts @@ -8,24 +8,24 @@ // PascalCase is being used as Breakpoints is used like an enum. // tslint:disable-next-line:variable-name export const Breakpoints = { - XSmall: '(max-width: 599.99px)', - Small: '(min-width: 600px) and (max-width: 959.99px)', - Medium: '(min-width: 960px) and (max-width: 1279.99px)', - Large: '(min-width: 1280px) and (max-width: 1919.99px)', + XSmall: '(max-width: 599.98px)', + Small: '(min-width: 600px) and (max-width: 959.98px)', + Medium: '(min-width: 960px) and (max-width: 1279.98px)', + Large: '(min-width: 1280px) and (max-width: 1919.98px)', XLarge: '(min-width: 1920px)', - Handset: '(max-width: 599.99px) and (orientation: portrait), ' + - '(max-width: 959.99px) and (orientation: landscape)', - Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' + - '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)', + Handset: '(max-width: 599.98px) and (orientation: portrait), ' + + '(max-width: 959.98px) and (orientation: landscape)', + Tablet: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), ' + + '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)', Web: '(min-width: 840px) and (orientation: portrait), ' + '(min-width: 1280px) and (orientation: landscape)', - HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)', - TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)', + HandsetPortrait: '(max-width: 599.98px) and (orientation: portrait)', + TabletPortrait: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)', WebPortrait: '(min-width: 840px) and (orientation: portrait)', - HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)', - TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)', + HandsetLandscape: '(max-width: 959.98px) and (orientation: landscape)', + TabletLandscape: '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)', WebLandscape: '(min-width: 1280px) and (orientation: landscape)', };