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.
This commit is contained in:
parent
9164f77269
commit
8883ccb205
|
@ -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('')
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue