diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index 222994838..f90f2c84a 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/src/assets/stylesheets/base/_typeset.scss @@ -217,6 +217,8 @@ kbd { margin: 1em 0; border-radius: px2rem(2px); line-height: 1.4; + // Hack: reduce jitter + backface-visibility: hidden; -webkit-overflow-scrolling: touch; // Actual container with code, overflowing diff --git a/src/assets/stylesheets/layout/_clipboard.scss b/src/assets/stylesheets/layout/_clipboard.scss index 2bf58fef7..ac34fd2cc 100644 --- a/src/assets/stylesheets/layout/_clipboard.scss +++ b/src/assets/stylesheets/layout/_clipboard.scss @@ -36,7 +36,7 @@ color: var(--md-default-fg-color--lightest); cursor: pointer; z-index: 1; - // Hack: put everything on the GPU to omit flickering + // Hack: reduce jitter backface-visibility: hidden; // Hide for print diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index 9d20bdc00..662186ed8 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/src/assets/stylesheets/layout/_header.scss @@ -36,10 +36,13 @@ color 250ms; background-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color); - box-shadow: none; - z-index: 2; - // Hack: putting the header on the GPU avoids unnecessary repaints + // Hack: reduce jitter by adding a transparent box shadow of the same size + // so the size of the layer doesn't change during animation + box-shadow: + 0 0 px2rem(4px) rgba(0, 0, 0, 0), + 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0); backface-visibility: hidden; + z-index: 2; // Always hide shadow, in case JavaScript is not available .no-js & { diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss index 98daebe60..fa362a662 100644 --- a/src/assets/stylesheets/layout/_search.scss +++ b/src/assets/stylesheets/layout/_search.scss @@ -136,6 +136,8 @@ $md-toggle__search--checked: // Search modal wrapper &__inner { + // Hack: reduce jitter + backface-visibility: hidden; // [tablet portrait -]: Put search modal off-canvas by default @include break-to-device(tablet portrait) { @@ -439,6 +441,8 @@ $md-toggle__search--checked: background-color: var(--md-default-bg-color); box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest); overflow-y: auto; + // Hack: reduce jitter + backface-visibility: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss index 40439e06a..3d9921472 100644 --- a/src/assets/stylesheets/layout/_sidebar.scss +++ b/src/assets/stylesheets/layout/_sidebar.scss @@ -131,8 +131,7 @@ $md-toggle__drawer--checked: margin: 0 px2rem(4px); overflow-y: auto; scroll-snap-type: y mandatory; - // Hack: putting the scroll wrapper on the GPU massively reduces jitter - // when locking the sidebars into place + // Hack: reduce jitter backface-visibility: hidden; // [tablet -]: Adjust margins