refactor: remove usage of deprecated webkit-overflow-scrolling

site/src/pages/menus/index.js

@@ -85,7 +85,7 @@ function Menus() {
 
             <p>
                 We recommend enabling submenus via JavaScript to enable accessibility.
-                To help get you started, <a href="/js/menus.js">an example script</a>
+                To help get you started, <a href="/js/menus.js">an example script</a> 
                 written in vanilla JS provides ARIA support, limited submenu arrow-key
                 navigation, and the ability to dismiss menus with an outside event or
                 the ESC key. But you may wish to go further by adding edge detection,
@@ -154,7 +154,7 @@ function Menus() {
 
             <p>
                 To create a scrollable horizontal menu, add the <code>pure-menu-scrollable</code> class name. When
-                there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported.
+                there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported. If you would like momentum-based scrolling we recommend using a JS library like <a href="https://github.com/ilyashubin/scrollbooster">scrollbooster</a> to add such effects. 
             </p>
 
             <Example>

site/src/pages/start/styles.css

@@ -74,7 +74,6 @@
 
 .grid-output .code {
     overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
     margin: 0;
 }
 #css .code,

site/static/css/main.css

@@ -208,7 +208,6 @@ code {
     border-left-width: 0;
     border-right-width: 0;
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
 }
 .code pre {
     margin: 0;
@@ -291,7 +290,6 @@ code {
     z-index: 1000; /* so the menu or its navicon stays above all content */
     background: #191818;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
 }
     #menu a {
         color: #999;
@@ -464,7 +462,6 @@ a.pure-button-primary {
     margin-left: -1em;
     margin-right: -1em;
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
     margin-bottom: 1em;
 }
 .table-responsive table {

site/static/layouts/side-menu/index.html

@@ -43,7 +43,7 @@
         <div class="content">
             <h2 class="content-subhead">How to use this layout</h2>
             <p>
-                To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
+                To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/layouts/side-menu/styles.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
             </p>
 
             <h2 class="content-subhead">Now Let's Speak Some Latin</h2>

site/static/layouts/side-menu/styles.css

@@ -89,7 +89,6 @@ appears on the left side of the page.
     z-index: 1000; /* so the menu or its navicon stays above all content */
     background: #191818;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
 }
     /*
     All anchors inside the menu should be styled like this.

src/menus/css/menus-scrollable.css

@@ -16,7 +16,6 @@
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
     /* a little extra padding for this style to allow for scrollbars */
     padding: .5em 0;
 }