From 0b9b8c5d17ed44757b88e7749a33cff338bc68dd Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sat, 16 Jun 2018 10:52:10 +0200 Subject: [PATCH] Use pull request #11315 from ncoden/fix/breakpoint-max-width-precision-11313 for v6.5.0 798377d96 fix: lower breakpoint max value precision to avoid rounding #11313 a36504ccb fix: revert mistakenly changed `$global-flexbox` setting in #11315 Signed-off-by: Nicolas Coden --- scss/components/_visibility.scss | 7 +++++-- scss/util/_breakpoint.scss | 5 ++++- test/sass/_breakpoint.scss | 8 ++++---- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss index 75472918a..30bf7cddc 100644 --- a/scss/components/_visibility.scss +++ b/scss/components/_visibility.scss @@ -6,7 +6,10 @@ /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** @mixin show-for($size) { $size: map-get($breakpoints, $size); - $size: -zf-bp-to-em($size) - .00001; + // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125). + // Use a precision under 1px to support browser zoom, but not to low to avoid rounding. + // See https://github.com/zurb/foundation-sites/issues/11313 + $size: -zf-bp-to-em($size) - .00125; @include breakpoint($size down) { display: none !important; @@ -20,7 +23,7 @@ $upper-bound-size: -zf-map-next($breakpoints, $size); // more often than not this will be correct, just one time round the loop it won't so set in scope here - $lower-bound: -zf-bp-to-em($lower-bound-size) - .00001; + $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125; // test actual lower-bound-size, if 0 set it to 0em @if strip-unit($lower-bound-size) == 0 { $lower-bound: -zf-bp-to-em($lower-bound-size); diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss index 6205b37aa..6fe99ce60 100644 --- a/scss/util/_breakpoint.scss +++ b/scss/util/_breakpoint.scss @@ -76,8 +76,11 @@ $breakpoint-classes: (small medium large) !default; // Convert any pixel, rem, or unitless value to em $bp: -zf-bp-to-em($bp); + // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125). + // Use a precision under 1px to support browser zoom, but not to low to avoid rounding. + // See https://github.com/zurb/foundation-sites/issues/11313 @if $bp-max { - $bp-max: -zf-bp-to-em($bp-max) - .00001; + $bp-max: -zf-bp-to-em($bp-max) - .00125; } // Conditions to skip media query creation diff --git a/test/sass/_breakpoint.scss b/test/sass/_breakpoint.scss index 1ea9badf9..18e62f004 100755 --- a/test/sass/_breakpoint.scss +++ b/test/sass/_breakpoint.scss @@ -24,10 +24,10 @@ @include test('Breakpoint (Only Range) [function]') { $test: breakpoint(medium only); - $expect: '(min-width: 40em) and (max-width: 63.99999em)'; + $expect: '(min-width: 40em) and (max-width: 63.99875em)'; $test-lowest: breakpoint(small only); - $expect-lowest: '(max-width: 39.99999em)'; + $expect-lowest: '(max-width: 39.99875em)'; $test-highest: breakpoint(xxlarge only); $expect-highest: '(min-width: 90em)'; @@ -44,13 +44,13 @@ @include test('Breakpoint (Named Down Range) [function]') { $test: breakpoint(medium down); - $expect: '(max-width: 63.99999em)'; + $expect: '(max-width: 63.99875em)'; @include assert-equal($test, $expect, 'Creates a down range out of a medium breakpoint'); $test-lowest: breakpoint(small down); - $expect-lowest: '(max-width: 39.99999em)'; + $expect-lowest: '(max-width: 39.99875em)'; @include assert-equal($test-lowest, $expect-lowest, 'Creates a down range out of a small breakpoint'); -- 2.47.2