fix: momentum scrolling for a few components

closes #10781

diff --git a/scss/_global.scss b/scss/_global.scss
index 0b50384f9a26c02c6c1e996ba5be72f0d9e6a98a..06a550c98bfed0b11e30b6d6a250a8b30e631b4e 100644 (file)
--- 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 af78b7ca7933429fdea3fe4ef97ddf0f43db1f6c..5a8894bddb52a09f37453b1da46187eb4ab9ae3f 100644 (file)
--- 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 182be77d503d59addf7ec46812520898fc88459f..83555774b19b19cb9cf0e54e9fdb8b6f1d67cbfd 100644 (file)
--- 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 1145ed62173ad4d00dc6d16e4af162d7c780eabe..cdd12728a2cf422d03f6b9779504642bea30959f 100644 (file)
--- 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 {