1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +02:00

Patch fractional viewport widths to work around Safari rounding bug (#25177)

Includes simplifying the prose in `tables.md` and adding the bug to the list of browser bugs.

Closes https://github.com/twbs/bootstrap/issues/25166
This commit is contained in:
Patrick H. Lauke
2018-01-03 07:42:03 +00:00
committed by XhmikosR
parent 1cfbb8305a
commit 7044ea82c1
5 changed files with 26 additions and 14 deletions

View File

@@ -29,15 +29,17 @@
}
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.01px
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// 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.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767px
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - .01px, null);
@return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.