OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Reduced jitter during header animation

Browse Source
This commit is contained in:
squidfunk 2020-03-01 00:11:30 +01:00
parent 067df2f6cf
commit 89d8d6c5ac
5 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/stylesheets/base/_typeset.scss
View File

@ -217,6 +217,8 @@ kbd {
margin: 1em 0; margin: 1em 0;
border-radius: px2rem(2px); border-radius: px2rem(2px);
line-height: 1.4; line-height: 1.4;
// Hack: reduce jitter
backface-visibility: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Actual container with code, overflowing // Actual container with code, overflowing

2
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -36,7 +36,7 @@
color: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--lightest);
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
// Hack: put everything on the GPU to omit flickering // Hack: reduce jitter
backface-visibility: hidden; backface-visibility: hidden;
// Hide for print // Hide for print

9
src/assets/stylesheets/layout/_header.scss
View File

@ -36,10 +36,13 @@
color 250ms; color 250ms;
background-color: var(--md-primary-fg-color); background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
box-shadow: none; // Hack: reduce jitter by adding a transparent box shadow of the same size
z-index: 2; // so the size of the layer doesn't change during animation
// Hack: putting the header on the GPU avoids unnecessary repaints box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0);
backface-visibility: hidden; backface-visibility: hidden;
z-index: 2;
// Always hide shadow, in case JavaScript is not available // Always hide shadow, in case JavaScript is not available
.no-js & { .no-js & {

4
src/assets/stylesheets/layout/_search.scss
View File

@ -136,6 +136,8 @@ $md-toggle__search--checked:
// Search modal wrapper // Search modal wrapper
&__inner { &__inner {
// Hack: reduce jitter
backface-visibility: hidden;
// [tablet portrait -]: Put search modal off-canvas by default // [tablet portrait -]: Put search modal off-canvas by default
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
@ -439,6 +441,8 @@ $md-toggle__search--checked:
background-color: var(--md-default-bg-color); background-color: var(--md-default-bg-color);
box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest); box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto; overflow-y: auto;
// Hack: reduce jitter
backface-visibility: hidden;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

3
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -131,8 +131,7 @@ $md-toggle__drawer--checked:
margin: 0 px2rem(4px); margin: 0 px2rem(4px);
overflow-y: auto; overflow-y: auto;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
// Hack: putting the scroll wrapper on the GPU massively reduces jitter // Hack: reduce jitter
// when locking the sidebars into place
backface-visibility: hidden; backface-visibility: hidden;
// [tablet -]: Adjust margins // [tablet -]: Adjust margins