Reduced jitter during header animation

src/assets/stylesheets/base/_typeset.scss

@@ -217,6 +217,8 @@ kbd {
     margin: 1em 0;
     border-radius: px2rem(2px);
     line-height: 1.4;
+    // Hack: reduce jitter
+    backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
 
     // Actual container with code, overflowing

src/assets/stylesheets/layout/_clipboard.scss

@@ -36,7 +36,7 @@
   color: var(--md-default-fg-color--lightest);
   cursor: pointer;
   z-index: 1;
-  // Hack: put everything on the GPU to omit flickering
+  // Hack: reduce jitter
   backface-visibility: hidden;
 
   // Hide for print

src/assets/stylesheets/layout/_header.scss

@@ -36,10 +36,13 @@
     color 250ms;
   background-color: var(--md-primary-fg-color);
   color: var(--md-primary-bg-color);
-  box-shadow: none;
-  z-index: 2;
-  // Hack: putting the header on the GPU avoids unnecessary repaints
+  // Hack: reduce jitter by adding a transparent box shadow of the same size
+  // so the size of the layer doesn't change during animation
+  box-shadow:
+    0 0           px2rem(4px) rgba(0, 0, 0, 0),
+    0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0);
   backface-visibility: hidden;
+  z-index: 2;
 
   // Always hide shadow, in case JavaScript is not available
   .no-js & {

src/assets/stylesheets/layout/_search.scss

@@ -136,6 +136,8 @@ $md-toggle__search--checked:
 
   // Search modal wrapper
   &__inner {
+    // Hack: reduce jitter
+    backface-visibility: hidden;
 
     // [tablet portrait -]: Put search modal off-canvas by default
     @include break-to-device(tablet portrait) {
@@ -439,6 +441,8 @@ $md-toggle__search--checked:
     background-color: var(--md-default-bg-color);
     box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
     overflow-y: auto;
+    // Hack: reduce jitter
+    backface-visibility: hidden;
     scroll-snap-type: y mandatory;
     -webkit-overflow-scrolling: touch;
 

src/assets/stylesheets/layout/_sidebar.scss

@@ -131,8 +131,7 @@ $md-toggle__drawer--checked:
     margin: 0 px2rem(4px);
     overflow-y: auto;
     scroll-snap-type: y mandatory;
-    // Hack: putting the scroll wrapper on the GPU massively reduces jitter
-    // when locking the sidebars into place
+    // Hack: reduce jitter
     backface-visibility: hidden;
 
     // [tablet -]: Adjust margins