diff --git a/404.html b/404.html
index ac1df92..b25a915 100644
--- a/404.html
+++ b/404.html
@@ -34,6 +34,7 @@
 
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "";
@@ -185,5 +186,6 @@
         <!-- Custom JS scripts -->
 
 
+    </div>
     </body>
 </html>
diff --git a/changelog.html b/changelog.html
index 311ff9f..e28729b 100644
--- a/changelog.html
+++ b/changelog.html
@@ -33,6 +33,7 @@
 
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "";
@@ -219,5 +220,6 @@
         <!-- Custom JS scripts -->
 
 
+    </div>
     </body>
 </html>
diff --git a/css/chrome.css b/css/chrome.css
index 59eae11..56c17b7 100644
--- a/css/chrome.css
+++ b/css/chrome.css
@@ -2,12 +2,6 @@
 
 @import 'variables.css';
 
-::-webkit-scrollbar {
-    background: var(--bg);
-}
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar);
-}
 html {
     scrollbar-color: var(--scrollbar) var(--bg);
 }
@@ -18,6 +12,19 @@ a > .hljs {
     color: var(--links);
 }
 
+/*
+    body-container is necessary because mobile browsers don't seem to like
+    overflow-x on the body tag when there is a <meta name="viewport"> tag.
+*/
+#body-container {
+    /*
+        This is used when the sidebar pushes the body content off the side of
+        the screen on small screens. Without it, dragging on mobile Safari
+        will want to reposition the viewport in a weird way.
+    */
+    overflow-x: hidden;
+}
+
 /* Menu Bar */
 
 #menu-bar,
diff --git a/design/interfaces.html b/design/interfaces.html
index 21d2820..3a1f5c4 100644
--- a/design/interfaces.html
+++ b/design/interfaces.html
@@ -33,6 +33,7 @@
 
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "../";
@@ -210,5 +211,6 @@
         <!-- Custom JS scripts -->
 
 
+    </div>
     </body>
 </html>
diff --git a/index.html b/index.html
index ff0cba8..0d66c1b 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,7 @@
 
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "";
@@ -194,5 +195,6 @@
         <!-- Custom JS scripts -->
 
 
+    </div>
     </body>
 </html>
diff --git a/print.html b/print.html
index c06169f..8147456 100644
--- a/print.html
+++ b/print.html
@@ -34,6 +34,7 @@
 
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "";
@@ -258,5 +259,6 @@ The Longhorn Edition of TOMAS is designed for use in enterprise scenarios. It is
         });
         </script>
 
+    </div>
     </body>
 </html>
diff --git a/supportpolicy.html b/supportpolicy.html
index 3777f8b..c6c58bc 100644
--- a/supportpolicy.html
+++ b/supportpolicy.html
@@ -33,6 +33,7 @@
 
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "";
@@ -211,5 +212,6 @@ The Longhorn Edition of TOMAS is designed for use in enterprise scenarios. It is
         <!-- Custom JS scripts -->
 
 
+    </div>
     </body>
 </html>
