Permalink
Browse files

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 #25166
  • Loading branch information...
patrickhlauke authored and XhmikosR committed Jan 3, 2018
1 parent 1cfbb83 commit 7044ea82c17853c4d6d3483114b860ce4a5cf7b1
View
@@ -278,6 +278,16 @@
origin: >
Bootstrap#20732
-
browser: >
Safari
summary: >
CSS `min-width` and `max-width` media features should not round fractional pixel
upstream_bug: >
WebKit#178261
origin: >
Bootstrap#25166
-
browser: >
Safari (OS X)
@@ -553,7 +553,7 @@ Regular table background variants are not available with the dark table, however
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of 575.99px, 767.99px, 991.99px, and 1119.99px, respectively.
Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %}
{{ callout-include | markdownify }}
@@ -17,7 +17,7 @@ footer {
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767.99px) {
@media screen and (max-width: 767.98px) {
.row-offcanvas {
position: relative;
transition: all .25s ease-out;
@@ -88,16 +88,16 @@ We occasionally use media queries that go in the other direction (the given scre
{% highlight scss %}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.99px) { ... }
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.99px) { ... }
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.99px) { ... }
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.99px) { ... }
@media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
@@ -119,16 +119,16 @@ There are also media queries and mixins for targeting a single segment of screen
{% highlight scss %}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.99px) { ... }
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.99px) { ... }
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.99px) { ... }
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.99px) { ... }
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@@ -149,7 +149,7 @@ Similarly, media queries may span multiple breakpoint widths:
{% highlight scss %}
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.99px) { ... }
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
{% endhighlight %}
The Sass mixin for targeting the same screen size range would be:
@@ -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.

0 comments on commit 7044ea8

Please sign in to comment.