From 7044ea82c17853c4d6d3483114b860ce4a5cf7b1 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 3 Jan 2018 07:42:03 +0000 Subject: [PATCH] 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 --- _data/browser-bugs.yml | 10 ++++++++++ docs/4.0/content/tables.md | 2 +- docs/4.0/examples/offcanvas/offcanvas.css | 2 +- docs/4.0/layout/overview.md | 18 +++++++++--------- scss/mixins/_breakpoints.scss | 8 +++++--- 5 files changed, 26 insertions(+), 14 deletions(-) diff --git a/_data/browser-bugs.yml b/_data/browser-bugs.yml index 339e2a18af..1ef63f26cd 100644 --- a/_data/browser-bugs.yml +++ b/_data/browser-bugs.yml @@ -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) diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index 3284c8a46e..f2a3b4ce4d 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -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 }} diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css index c23004ad49..1762cd5c13 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.css +++ b/docs/4.0/examples/offcanvas/offcanvas.css @@ -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; diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md index bdc030d3f4..89c4fcbea6 100644 --- a/docs/4.0/layout/overview.md +++ b/docs/4.0/layout/overview.md @@ -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: diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 7c95c688f5..85ce72f6b6 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -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.