Set touch-action to "none"

Firefox currently seems extremely fickle - with `pan-y` if fires pointercancel as soon as a touch strays even a pixel or so vertically.
While `touch-action: pan-y` would be ideal (allowing users to scroll the page even when their finger started the scroll on the carousel), this prevents a swipe that isn't perfectly/only horizontal to be recognised by Firefox.

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 932b90f7dd2458cf717cc96048da0d0aac1d3a3d..bafd45fe78d81478f8e1e9ce4f368102b4df8412 100644 (file)
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -19,7 +19,7 @@ $(function () {
 
   var stylesCarousel = [
     '<style>',
-    '  .carousel.pointer-event { -ms-touch-action: pan-y pinch-zoom; touch-action: pan-y pinch-zoom; }',
+    '  .carousel.pointer-event { -ms-touch-action: none; touch-action: none; }',
     '</style>'
   ].join('')
 

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 130965f7985acf48b050f9872379a937cbbf6868..41d4e60265bc1e0eb391de4a5667aa9653ff6c18 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -1,11 +1,14 @@
 // Notes on the classes:
 //
-// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
 //    the active slide is heading.
-// 2. .active.carousel-item is the current slide.
-// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+// 3. .active.carousel-item is the current slide.
+// 4. .active.carousel-item-left and .active.carousel-item-right is the current
 //    slide in its in-transition state. Only one of these occurs at a time.
-// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
 //    is the upcoming slide in transition.
 
 .carousel {
@@ -13,7 +16,7 @@
 }
 
 .carousel.pointer-event {
-  touch-action: pan-y pinch-zoom;
+  touch-action: none;
 }
 
 .carousel-inner {