From 703ef5c99284f1e2b8d63c3af411c945dc756e20 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 12 May 2020 12:02:07 -0400 Subject: [PATCH] fix(display): remove 1px gap between mutually exclusive breakpoints (#21276) updates breakpoint max to reduce the max width by 0.02px closes #20993 closes #20743 --- core/src/themes/ionic.mixins.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss index e3e4afb0dc..7f13a7a3c0 100644 --- a/core/src/themes/ionic.mixins.scss +++ b/core/src/themes/ionic.mixins.scss @@ -123,13 +123,18 @@ } // Maximum breakpoint width. Null for the smallest (first) breakpoint. -// The maximum value is calculated as the minimum of the current one. +// The maximum value is reduced by 0.02px to work around the limitations of +// `min-` and `max-` prefixes and viewports with fractional widths. // -// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) -// 576px +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max +// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. +// See https://bugs.webkit.org/show_bug.cgi?id=178261 // See https://bugs.webkit.org/show_bug.cgi?id=178261 +// +// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 767.98px @function breakpoint-max($name, $breakpoints: $screen-breakpoints) { - $min: breakpoint-min($name, $breakpoints); - @return if($min, breakpoint-min($name, $breakpoints), null); + $max: map-get($breakpoints, $name); + @return if($max and $max > 0, $max - .02, null); } // Media of at most the maximum breakpoint width. No query for the largest breakpoint.