Use pull request #11315 from ncoden/fix/breakpoint-max-width-precision-11313 for...

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 <nicolas@ncoden.fr>

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 75472918adf501df10c84bd00973c799dae4ed12..30bf7cddc8bb1348234c3a378b6679d7dc0fbe8c 100644 (file)
--- 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 6205b37aa424aba49a7b4064afc31459376bf5b3..6fe99ce607b9e08de79aa72f9b2da94c549b2512 100644 (file)
--- 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 1ea9badf981b96bb99590ba9e8bb9a4c5745b27a..18e62f00499a8a90446832caa22cc45c17d23b92 100755 (executable)
--- 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');