1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +01:00

Fixed sidebar jitter when scrolling footer into view

This commit is contained in:
squidfunk 2020-11-07 12:26:31 +01:00
parent 6d671bf246
commit a9c782768e
13 changed files with 56 additions and 19 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,12 +1,12 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.00f9b4e0.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.00f9b4e0.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.7836ba4d.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7836ba4d.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.fd16492e.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.fd16492e.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.4ac00218.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.4ac00218.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.e87fb0f5.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.e87fb0f5.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.358818c7.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.358818c7.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.88a3f51b.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.88a3f51b.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.f0267088.min.css",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e87fb0f5.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.358818c7.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f0267088.min.css' | url }}">
@ -178,7 +178,7 @@
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.fd16492e.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.00f9b4e0.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.7836ba4d.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

View File

@ -52,13 +52,29 @@ export function resetSidebarOffset(
/**
* Set sidebar height
*
* This function doesn't set the height of the actual sidebar, but of its first
* child the `.md-sidebar__scrollwrap` element in order to mitigiate jittery
* sidebars when the footer is scrolled into view. At some point we switched
* from `absolute` / `fixed` positioning to `sticky` positioning, which greatly
* reduced jitter in some browsers (respectively Firefox and Safari) when
* scrolling from the top. However, top-aligned sticky positioning means that
* the sidebar snaps to the bottom when the end of the container is reached.
* This is what leads to the mentioned jitter, as the sidebar's height may be
* updated to slowly.
*
* By setting the height of the sidebar to zero (while preserving `padding`),
* and the height on its first element, this behaviour can be mitigiated. We
* must assume that the top- and bottom offset (`padding`) are equal, as the
* `offsetBottom` value is `undefined`.
*
* @param el - Sidebar element
* @param value - Sidebar height
*/
export function setSidebarHeight(
el: HTMLElement, value: number
): void {
el.style.height = `${value}px`
const scrollwrap = el.firstElementChild as HTMLElement
scrollwrap.style.height = `${value - 2 * scrollwrap.offsetTop}px`
}
/**
@ -69,5 +85,6 @@ export function setSidebarHeight(
export function resetSidebarHeight(
el: HTMLElement
): void {
el.style.height = ""
const scrollwrap = el.firstElementChild as HTMLElement
scrollwrap.style.height = ""
}

View File

@ -158,7 +158,6 @@
// [tablet -]: Layered navigation
@include break-to-device(tablet) {
background-color: var(--md-default-bg-color);
// Stretch primary navigation to drawer
&--primary,
@ -171,6 +170,7 @@
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--md-default-bg-color);
}
// Adjust styles for primary navigation
@ -412,6 +412,11 @@
}
}
// Adjust styles for secondary navigation
&--secondary {
background-color: transparent;
}
// Hide nested navigation by default
.md-nav__toggle ~ & {
display: flex;

View File

@ -53,8 +53,8 @@ $md-toggle__drawer--checked:
top: px2rem(48px);
align-self: flex-start;
width: px2rem(242px);
height: 0;
padding: px2rem(24px) 0;
overflow: hidden;
// Hide for print
@media print {
@ -103,6 +103,16 @@ $md-toggle__drawer--checked:
}
}
// [screen +]: Convert navigation to sidebar
@include break-from-device(screen) {
height: 0;
// Normal sticky behavior, if JavaScript is not available.
.no-js & {
height: auto;
}
}
// Secondary sidebar with table of contents
&--secondary {
display: none;
@ -111,6 +121,12 @@ $md-toggle__drawer--checked:
// [tablet landscape +]: Show table of contents next to body copy
@include break-from-device(tablet landscape) {
display: block;
height: 0;
// Normal sticky behavior, if JavaScript is not available.
.no-js & {
height: auto;
}
// Ensure smooth scrolling on iOS
.md-sidebar__scrollwrap {
@ -121,7 +137,6 @@ $md-toggle__drawer--checked:
// Wrapper for scrolling on overflow
&__scrollwrap {
max-height: 100%;
margin: 0 px2rem(4px);
overflow-y: auto;
// Hack: reduce jitter
@ -135,7 +150,7 @@ $md-toggle__drawer--checked:
// 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;
animation: md-sidebar__scrollwrap--hack 1000ms forwards;
}
// [tablet -]: Adjust margins