Reduced amount of created layers

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.21a66646.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.21a66646.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.bc3a7362.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.bc3a7362.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.b0b43276.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.b0b43276.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.784c5235.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.784c5235.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.97c3fac0.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.fbb3ba0f.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.97c3fac0.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.fbb3ba0f.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
       {% endif %}
@@ -178,7 +178,7 @@
     {% endblock %}
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.b0b43276.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.21a66646.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.bc3a7362.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/stylesheets/base/_typeset.scss

@@ -216,8 +216,6 @@ kbd {
     position: relative;
     margin: 1em 0;
     line-height: 1.4;
-    // Hack: reduce jitter
-    backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
 
     // Actual container with code, overflowing

src/assets/stylesheets/extensions/_permalinks.scss

@@ -31,15 +31,13 @@
   .headerlink {
     display: inline-block;
     margin-left: px2rem(10px);
-    transform: translate(0, px2rem(5px));
     // Hack: If we don't set visibility hidden, the text content of the node
     // will include the headerlink character, which is why Google indexes them.
     visibility: hidden;
     opacity: 0;
     transition:
-      transform  250ms 250ms,
       color      250ms,
-      opacity    125ms 250ms,
+      opacity    125ms,
       visibility   0ms 500ms;
 
     // Adjust for RTL languages
@@ -60,23 +58,21 @@
   }
 
   // Make permalink visible on hover
-  :hover  .headerlink,
-  :target .headerlink,
+  :hover  > .headerlink,
+  :target > .headerlink,
   .headerlink:focus {
-    transform: translate(0, 0);
     visibility: visible;
     opacity: 1;
     transition:
-      transform  250ms 250ms,
       color      250ms,
-      opacity    125ms 250ms,
+      opacity    125ms,
       visibility   0ms;
   }
 
   // Active or targeted permalink
+  :target > .headerlink,
   .headerlink:focus,
-  .headerlink:hover,
-  :target .headerlink {
+  .headerlink:hover {
     color: var(--md-accent-fg-color);
   }
 

src/assets/stylesheets/layout/_base.scss

@@ -173,6 +173,9 @@ hr {
 // Skip link
 .md-skip {
   position: fixed;
+  // Hack: If we don't set the negative z-index, the skip link will induce the
+  // creation of new layers when code blocks are near the header on scrolling
+  z-index: -1;
   margin: px2rem(10px);
   padding: px2rem(6px) px2rem(10px);
   color: var(--md-default-bg-color);

src/assets/stylesheets/layout/_clipboard.scss

@@ -34,8 +34,6 @@
   height: px2rem(24px);
   color: var(--md-default-fg-color--lightest);
   border-radius: px2rem(2px);
-  // Hack: reduce jitter
-  backface-visibility: hidden;
   cursor: pointer;
   transition: color 250ms;
 

src/assets/stylesheets/layout/_header.scss

@@ -152,8 +152,6 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    // Hack: reduce jitter
-    backface-visibility: hidden;
     transition:
       transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
       opacity   150ms;

src/assets/stylesheets/layout/_nav.scss

@@ -209,8 +209,6 @@
           background-color: var(--md-default-bg-color);
           box-shadow:
             inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
-          // Hack: reduce jitter
-          backface-visibility: hidden;
           scroll-snap-type: y mandatory;
 
           // Remove border for first list item
@@ -398,6 +396,11 @@
       transition:
         transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
         opacity   125ms 125ms;
+
+      // Hack: reduce jitter
+      > .md-nav__list {
+        backface-visibility: hidden;
+      }
     }
   }
 

src/assets/stylesheets/layout/_search.scss

@@ -531,7 +531,6 @@ $md-toggle__search--checked:
   // Link inside item
   &__link {
     display: block;
-    overflow: hidden;
     outline: 0;
     transition: background 250ms;
     scroll-snap-align: start;

src/assets/stylesheets/layout/_tabs.scss

@@ -54,6 +54,7 @@
     padding: 0;
     white-space: nowrap;
     list-style: none;
+    contain: content;
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {