diff options
| author | patrickhlauke <[email protected]> | 2018-10-15 23:25:44 +0100 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-10-20 15:32:09 +0300 |
| commit | 8883ccb205abfe975b4cacca8fbc22cf67092eb0 (patch) | |
| tree | 09a2c57f6df054d28f6a8bd6f00e34d1f7e32516 /scss | |
| parent | 9164f772698a54c45da632189bdf65e719c39f73 (diff) | |
| download | bootstrap-8883ccb205abfe975b4cacca8fbc22cf67092eb0.tar.xz bootstrap-8883ccb205abfe975b4cacca8fbc22cf67092eb0.zip | |
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.
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_carousel.scss | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 130965f79..41d4e6026 100644 --- 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 { |