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:
committed by
XhmikosR
parent
1cfbb8305a
commit
7044ea82c1
@@ -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.
|
||||
|
Reference in New Issue
Block a user