Fixed sidebar jitter when scrolling footer into view

material/assets/manifest.json

@@ -1,12 +1,12 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.00f9b4e0.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7836ba4d.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.00f9b4e0.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7836ba4d.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.fd16492e.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.fd16492e.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.4ac00218.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.4ac00218.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.e87fb0f5.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.358818c7.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.e87fb0f5.min.css.map",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.358818c7.min.css.map",
   "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.88a3f51b.min.css",
   "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.88a3f51b.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.f0267088.min.css",

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e87fb0f5.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.358818c7.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f0267088.min.css' | url }}">
@@ -178,7 +178,7 @@
     </div>
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.fd16492e.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.00f9b4e0.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.7836ba4d.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/components/shared/sidebar/set/index.ts

@@ -52,13 +52,29 @@ export function resetSidebarOffset(
 /**
  * Set sidebar height
  *
+ * This function doesn't set the height of the actual sidebar, but of its first
+ * child – the `.md-sidebar__scrollwrap` element in order to mitigiate jittery
+ * sidebars when the footer is scrolled into view. At some point we switched
+ * from `absolute` / `fixed` positioning to `sticky` positioning, which greatly
+ * reduced jitter in some browsers (respectively Firefox and Safari) when
+ * scrolling from the top. However, top-aligned sticky positioning means that
+ * the sidebar snaps to the bottom when the end of the container is reached.
+ * This is what leads to the mentioned jitter, as the sidebar's height may be
+ * updated to slowly.
+ *
+ * By setting the height of the sidebar to zero (while preserving `padding`),
+ * and the height on its first element, this behaviour can be mitigiated. We
+ * must assume that the top- and bottom offset (`padding`) are equal, as the
+ * `offsetBottom` value is `undefined`.
+ *
  * @param el - Sidebar element
  * @param value - Sidebar height
  */
 export function setSidebarHeight(
   el: HTMLElement, value: number
 ): void {
-  el.style.height = `${value}px`
+  const scrollwrap = el.firstElementChild as HTMLElement
+  scrollwrap.style.height = `${value - 2 * scrollwrap.offsetTop}px`
 }
 
 /**
@@ -69,5 +85,6 @@ export function setSidebarHeight(
 export function resetSidebarHeight(
   el: HTMLElement
 ): void {
-  el.style.height = ""
+  const scrollwrap = el.firstElementChild as HTMLElement
+  scrollwrap.style.height = ""
 }

src/assets/stylesheets/main/layout/_nav.scss

@@ -158,7 +158,6 @@
 
   // [tablet -]: Layered navigation
   @include break-to-device(tablet) {
-    background-color: var(--md-default-bg-color);
 
     // Stretch primary navigation to drawer
     &--primary,
@@ -171,6 +170,7 @@
       display: flex;
       flex-direction: column;
       height: 100%;
+      background-color: var(--md-default-bg-color);
     }
 
     // Adjust styles for primary navigation
@@ -412,6 +412,11 @@
       }
     }
 
+    // Adjust styles for secondary navigation
+    &--secondary {
+      background-color: transparent;
+    }
+
     // Hide nested navigation by default
     .md-nav__toggle ~ & {
       display: flex;

src/assets/stylesheets/main/layout/_sidebar.scss

@@ -53,8 +53,8 @@ $md-toggle__drawer--checked:
   top: px2rem(48px);
   align-self: flex-start;
   width: px2rem(242px);
+  height: 0;
   padding: px2rem(24px) 0;
-  overflow: hidden;
 
   // Hide for print
   @media print {
@@ -103,6 +103,16 @@ $md-toggle__drawer--checked:
     }
   }
 
+  // [screen +]: Convert navigation to sidebar
+  @include break-from-device(screen) {
+    height: 0;
+
+    // Normal sticky behavior, if JavaScript is not available.
+    .no-js & {
+      height: auto;
+    }
+  }
+
   // Secondary sidebar with table of contents
   &--secondary {
     display: none;
@@ -111,6 +121,12 @@ $md-toggle__drawer--checked:
     // [tablet landscape +]: Show table of contents next to body copy
     @include break-from-device(tablet landscape) {
       display: block;
+      height: 0;
+
+      // Normal sticky behavior, if JavaScript is not available.
+      .no-js & {
+        height: auto;
+      }
 
       // Ensure smooth scrolling on iOS
       .md-sidebar__scrollwrap {
@@ -121,7 +137,6 @@ $md-toggle__drawer--checked:
 
   // Wrapper for scrolling on overflow
   &__scrollwrap {
-    max-height: 100%;
     margin: 0 px2rem(4px);
     overflow-y: auto;
     // Hack: reduce jitter
@@ -135,7 +150,7 @@ $md-toggle__drawer--checked:
     // this reason, we use an animation to set scroll snaping with a slight
     // delay, which seems to fix the issue (#1667).
     .js & {
-      animation: md-sidebar__scrollwrap--hack 400ms forwards;
+      animation: md-sidebar__scrollwrap--hack 1000ms forwards;
     }
 
     // [tablet -]: Adjust margins