Added workaround for Chrome bug with scroll snapping

squidfunk · May 3, 2020 · 1b72c9f · 1b72c9f
1 parent 3a0b776
commit 1b72c9f
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/material/assets/manifest.json b/material/assets/manifest.json
@@ -5,8 +5,8 @@
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.8caa27b7.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.37585f48.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.37585f48.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.cc744bab.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.cc744bab.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.f6cf1dc9.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.f6cf1dc9.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.85bb4ebe.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.85bb4ebe.min.css.map"
 }
diff --git a/material/assets/stylesheets/main.cc744bab.min.css.map b/material/assets/stylesheets/main.cc744bab.min.css.map
diff --git a/.../assets/stylesheets/main.cc744bab.min.css → .../assets/stylesheets/main.f6cf1dc9.min.css b/.../assets/stylesheets/main.cc744bab.min.css → .../assets/stylesheets/main.f6cf1dc9.min.css
diff --git a/material/assets/stylesheets/main.f6cf1dc9.min.css.map b/material/assets/stylesheets/main.f6cf1dc9.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.cc744bab.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f6cf1dc9.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.85bb4ebe.min.css' | url }}">
       {% endif %}

diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss
@@ -28,6 +28,21 @@
 $md-toggle__drawer--checked:
   "[data-md-toggle=\"drawer\"]:checked ~ .md-container";
 
+// ----------------------------------------------------------------------------
+// Keyframes
+// ----------------------------------------------------------------------------
+
+// Activate scroll snapping with delay
+@keyframes md-sidebar__scrollwrap--hack {
+  0%, 99% {
+    scroll-snap-type: none;
+  }
+
+  100% {
+    scroll-snap-type: y mandatory;
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -111,7 +126,14 @@ $md-toggle__drawer--checked:
     overflow-y: auto;
     // Hack: reduce jitter
     backface-visibility: hidden;
-    scroll-snap-type: y mandatory;
+
+    // Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
+    // to the bottom if `scroll-snap-type` is set on the initial render. For
+    // 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;
+    }
 
     // [tablet -]: Adjust margins
     @include break-to-device(tablet) {