From 8709108cea0f41228a5bbb5363dfd8c5330600e2 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 2 Apr 2020 12:05:35 -0500 Subject: [PATCH] feat(grid): update breakpoint-down with correct max width --- packages/layout/scss/_breakpoint.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/layout/scss/_breakpoint.scss b/packages/layout/scss/_breakpoint.scss index 5fab2b84b71b..c9c8799be594 100644 --- a/packages/layout/scss/_breakpoint.scss +++ b/packages/layout/scss/_breakpoint.scss @@ -163,8 +163,13 @@ $carbon--grid-breakpoints: ( @content; } } @else if map-has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 $breakpoint: map-get($breakpoints, $name); - $width: map-get($breakpoint, width); + $width: map-get($breakpoint, width) - 0.02; @media (max-width: $width) { @content; }