From: Joe Workman Date: Tue, 2 Nov 2021 04:35:15 +0000 (-0700) Subject: fix: momentum scrolling for a few components X-Git-Tag: v6.7.4^2~10 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=91a0f2a02977127696e49b40e435d15de1948442;p=thirdparty%2Ffoundation%2Ffoundation-sites.git fix: momentum scrolling for a few components closes #10781 --- diff --git a/scss/_global.scss b/scss/_global.scss index 0b50384f9..06a550c98 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -234,6 +234,7 @@ $global-color-pick-contrast-tolerance: 0 !default; // Prevent text overflow on pre pre { overflow: auto; + -webkit-overflow-scrolling: touch; } // Make reset inherit font-family instead of settings sans-serif diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss index af78b7ca7..5a8894bdd 100644 --- a/scss/components/_off-canvas.scss +++ b/scss/components/_off-canvas.scss @@ -196,6 +196,7 @@ $maincontent-class: 'off-canvas-content' !default; left: 0; height: 100%; overflow-y: auto; + -webkit-overflow-scrolling: touch; @each $name, $size in $sizes { @include breakpoint($name) { @@ -233,6 +234,7 @@ $maincontent-class: 'off-canvas-content' !default; right: 0; height: 100%; overflow-y: auto; + -webkit-overflow-scrolling: touch; @each $name, $size in $sizes { @include breakpoint($name) { @@ -270,6 +272,7 @@ $maincontent-class: 'off-canvas-content' !default; left: 0; width: 100%; overflow-x: auto; + -webkit-overflow-scrolling: touch; @each $name, $size in $sizes { @include breakpoint($name) { @@ -306,6 +309,7 @@ $maincontent-class: 'off-canvas-content' !default; left: 0; width: 100%; overflow-x: auto; + -webkit-overflow-scrolling: touch; @each $name, $size in $sizes { @include breakpoint($name) { diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss index 182be77d5..83555774b 100644 --- a/scss/components/_reveal.scss +++ b/scss/components/_reveal.scss @@ -64,6 +64,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default; display: none; background-color: $background; overflow-y: auto; + -webkit-overflow-scrolling: touch; } /// Adds base styles for a modal. @@ -137,6 +138,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default; &.zf-has-scroll { overflow-y: scroll; + -webkit-overflow-scrolling: touch; } body { // sass-lint:disable-line no-qualifying-elements @@ -158,6 +160,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default; margin-right: auto; margin-left: auto; overflow-y: auto; + -webkit-overflow-scrolling: touch; // Remove padding &.collapse { diff --git a/scss/prototype/_overflow.scss b/scss/prototype/_overflow.scss index 1145ed621..cdd12728a 100644 --- a/scss/prototype/_overflow.scss +++ b/scss/prototype/_overflow.scss @@ -22,18 +22,27 @@ $prototype-overflow: ( /// @param {String} $overflow [] Overflow classes @mixin overflow($overflow) { overflow: $overflow !important; + @if $overflow == 'scroll' { + -webkit-overflow-scrolling: touch; + } } /// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow` /// @param {String} $overflow [] Overflow classes (horizontal axis) @mixin overflow-x($overflow) { overflow-x: $overflow !important; + @if $overflow == 'scroll' { + -webkit-overflow-scrolling: touch; + } } /// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow` /// @param {String} $overflow [] Overflow classes (vertical axis) @mixin overflow-y($overflow) { overflow-y: $overflow !important; + @if $overflow == 'scroll' { + -webkit-overflow-scrolling: touch; + } } @mixin foundation-prototype-overflow {