Merge pull request #100 from squidfunk/fix/massive-repaints-when-scrolling

Massive repaints when scrolling

material/base.html

@@ -45,7 +45,7 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ff220fd69d.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fa1296f85d.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}

src/assets/stylesheets/layout/_content.scss

@@ -35,6 +35,9 @@
   // [screen +]: Add space for table of contents
   @include break-from-device(screen) {
     margin-left: 24.2rem;
+    // Hack: setting overflow to auto is necessary in combination with floating
+    // the inner container left, as this omits massive repaints
+    overflow: auto;
   }
 
   // Define spacing
@@ -44,6 +47,13 @@
     // [screen +]: Increase spacing
     @include break-from-device(screen) {
       margin: 2.4rem;
+      // Hack: necessary to omit massive repaints when scrolling
+      float: left;
+
+      // Hack: remove bottom spacing, due to margin collapse
+      :last-child {
+        margin-bottom: 0;
+      }
     }
   }
 

src/assets/stylesheets/layout/_sidebar.scss

@@ -40,6 +40,7 @@
   &[data-md-state="lock"] {
     position: fixed;
     top: 5.6rem;
+    backface-visibility: hidden;
   }
 
   // [tablet -]: Convert navigation to drawer