Switched to touch-action (previously -webkit-overflow-scrolling)

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.0e29fb74.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.acd913ae.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.0e29fb74.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.acd913ae.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.f45d2d8d.min.js",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.241d0c29.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f45d2d8d.min.js.map",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.241d0c29.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.7f7c8775.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.7f7c8775.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.14de1027.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.28d6c211.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.14de1027.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.28d6c211.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
       {% endif %}
@@ -178,8 +178,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.f45d2d8d.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.241d0c29.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.0e29fb74.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.acd913ae.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/components/navigation/_/index.ts

@@ -20,10 +20,10 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, OperatorFunction, pipe } from "rxjs"
+import { Observable, OperatorFunction, of, pipe } from "rxjs"
 import { map, switchMap } from "rxjs/operators"
 
-import { Viewport, getElements } from "browser"
+import { Viewport } from "browser"
 
 import { Header } from "../../header"
 import { Main } from "../../main"
@@ -32,11 +32,6 @@ import {
   applySidebar,
   watchSidebar
 } from "../../shared"
-import {
-  NavigationLayer,
-  applyNavigationLayer,
-  watchNavigationLayer
-} from "../layer"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -45,9 +40,7 @@ import {
 /**
  * Navigation for [screen -]
  */
-interface NavigationBelowScreen {
+interface NavigationBelowScreen {} // tslint:disable-line
-  layer: NavigationLayer               /* Active layer */
-}
 
 /**
  * Navigation for [screen +]
@@ -108,12 +101,7 @@ export function mountNavigation(
 
           /* [screen -]: Mount navigation in drawer */
           } else {
-            const els = getElements("nav", el)
+            return of({})
-            return watchNavigationLayer(els)
-              .pipe(
-                applyNavigationLayer(els),
-                map(layer => ({ layer }))
-              )
           }
         })
       )

src/assets/javascripts/components/navigation/index.ts

@@ -21,4 +21,3 @@
  */
 
 export * from "./_"
-export * from "./layer"

src/assets/javascripts/components/navigation/layer/_/index.ts

@@ -1,33 +0,0 @@
-/*
- * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-/* ----------------------------------------------------------------------------
- * Types
- * ------------------------------------------------------------------------- */
-
-/**
- * Navigation layer
- */
-export interface NavigationLayer {
-  prev?: HTMLElement                   /* Layer (previous) */
-  next: HTMLElement                    /* Layer (next) */
-}

src/assets/javascripts/components/navigation/layer/index.ts

@@ -1,25 +0,0 @@
-/*
- * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-export * from "./_"
-export * from "./react"
-export * from "./set"

src/assets/javascripts/components/navigation/layer/react/index.ts

@@ -1,133 +0,0 @@
-/*
- * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-import { findLast } from "ramda"
-import {
-  MonoTypeOperatorFunction,
-  Observable,
-  animationFrameScheduler,
-  fromEvent,
-  merge,
-  pipe
-} from "rxjs"
-import {
-  delay,
-  finalize,
-  map,
-  observeOn,
-  scan,
-  tap
-} from "rxjs/operators"
-
-import { getElement, getElementOrThrow } from "browser"
-
-import { NavigationLayer } from "../_"
-import {
-  resetOverflowScrolling,
-  setOverflowScrolling
-} from "../set"
-
-/* ----------------------------------------------------------------------------
- * Functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Watch navigation layer
- *
- * On iOS we want to add `-webkit-overflow-scrolling: touch` for the menus
- * contained in the drawer, but as the navigational layers are nested, we can
- * only add it to the topmost layer or extremely weird cropping will occur.
- * This implementation keeps track of the previous and current layer.
- *
- * @param els - Navigation elements
- *
- * @return Navigation layer observable
- */
-export function watchNavigationLayer(
-  els: HTMLElement[]
-): Observable<NavigationLayer> {
-  const table = new Map<HTMLInputElement, HTMLElement>()
-  for (const el of els) {
-    const label = getElement<HTMLLabelElement>("label", el)
-    if (typeof label !== "undefined") {
-      const input = getElementOrThrow<HTMLInputElement>(`#${label.htmlFor}`)
-      table.set(input, el)
-    }
-  }
-
-  /* Determine topmost layer */
-  const layer$ = merge(...[...table.keys()].map(input => (
-    fromEvent(input, "change")
-  )))
-    .pipe(
-      map(() => getElementOrThrow(".md-nav__list", table.get(
-        findLast(({ checked }) => checked, [...table.keys()])!
-      )))
-    )
-
-  /* Return previous and next layer */
-  return layer$
-    .pipe(
-      map(next => ({ next })),
-      scan(({ next: prev }, { next }) => ({ prev, next }))
-    )
-}
-
-/* ------------------------------------------------------------------------- */
-
-/**
- * Apply navigation layer
- *
- * @param els - Navigation elements
- *
- * @return Operator function
- */
-export function applyNavigationLayer(
-  els: HTMLElement[]
-): MonoTypeOperatorFunction<NavigationLayer> {
-  return pipe(
-
-    /* Defer repaint to next animation frame */
-    observeOn(animationFrameScheduler),
-    tap(({ prev }) => {
-      if (prev)
-        resetOverflowScrolling(prev)
-    }),
-
-    /* Wait until transition has finished */
-    delay(250),
-
-    /* Defer repaint to next animation frame */
-    observeOn(animationFrameScheduler),
-    tap(({ next }) => {
-      setOverflowScrolling(next)
-    }),
-
-    /* Reset on complete or error */
-    finalize(() => {
-      for (const el of els)
-        resetOverflowScrolling(
-          getElementOrThrow(".md-nav__list", el)
-        )
-    })
-  )
-}

src/assets/javascripts/components/navigation/layer/set/index.ts

@@ -1,60 +0,0 @@
-/*
- * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-/* ----------------------------------------------------------------------------
- * Helper types
- * ------------------------------------------------------------------------- */
-
-/**
- * Global augmentations
- */
-declare global {
-  interface CSSStyleDeclaration {
-    webkitOverflowScrolling: "touch" | ""
-  }
-}
-
-/* ----------------------------------------------------------------------------
- * Functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Set overflow scrolling
- *
- * @param el - Scrollable element
- */
-export function setOverflowScrolling(
-  el: HTMLElement
-): void {
-  el.style.webkitOverflowScrolling = "touch"
-}
-
-/**
- * Reset overflow scrolling
- *
- * @param el - Scrollable element
- */
-export function resetOverflowScrolling(
-  el: HTMLElement
-): void {
-  el.style.webkitOverflowScrolling = ""
-}

src/assets/stylesheets/base/_typeset.scss

@@ -204,7 +204,7 @@ kbd {
       word-break: normal;
       box-shadow: none;
       box-decoration-break: slice;
-      -webkit-overflow-scrolling: touch;
+      touch-action: pan-x;
 
       // Override native scrollbar styles
       &::-webkit-scrollbar {
@@ -393,7 +393,7 @@ kbd {
     box-shadow:
       0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
       0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.1);
-    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
 
     // Due to margin collapse because of the necessary inline-block hack, we
     // cannot increase the bottom margin on the table, so we just increase the
@@ -456,7 +456,7 @@ kbd {
   &__scrollwrap {
     margin: 1em px2rem(-16px);
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
   }
 
   // Data table wrapper, in case JavaScript is available

src/assets/stylesheets/extensions/pymdown/_arithmatex.scss

@@ -34,7 +34,7 @@
     margin: 0.75em 0;
     padding: 0.75em 0;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
   }
 
   // Stretch top-level containers

src/assets/stylesheets/layout/_nav.scss

@@ -210,6 +210,7 @@
           box-shadow:
             inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
           scroll-snap-type: y mandatory;
+          touch-action: pan-y;
 
           // Remove border for first list item
           > .md-nav__item:first-child {

src/assets/stylesheets/layout/_search.scss

@@ -446,7 +446,7 @@ $md-toggle__search--checked:
     // Hack: reduce jitter
     backface-visibility: hidden;
     scroll-snap-type: y mandatory;
-    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
 
     // Mitigiate excessive repaints on non-retina devices
     @media (max-resolution: 1dppx) {

src/assets/stylesheets/layout/_sidebar.scss

@@ -109,7 +109,7 @@ $md-toggle__drawer--checked:
 
       // Ensure smooth scrolling on iOS
       .md-sidebar__scrollwrap {
-        -webkit-overflow-scrolling: touch;
+        touch-action: pan-y;
       }
     }