Added workaround for Chrome bug with scroll snapping

This commit is contained in:
squidfunk 2020-05-03 13:54:36 +02:00
parent 3a0b776e39
commit 1b72c9f17d
6 changed files with 29 additions and 7 deletions

View File

@ -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"
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 %}

View File

@ -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) {