javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(display): remove 1px gap between mutually exclusive breakpoints (#21276)

Browse Source 
updates breakpoint max to reduce the max width by 0.02px

closes #20993 closes #20743
This commit is contained in:
Brandy Carney
2020-05-12 12:02:07 -04:00
committed by GitHub
parent 85cc35ee91
commit 703ef5c992
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/themes/ionic.mixins.scss
View File

@ -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.