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

3 files changed, 11 insertions, 11 deletions

diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 3284c8a46..f2a3b4ce4 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 c23004ad4..1762cd5c1 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 bdc030d3f..89c4fcbea 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: