kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Set touch-action to "none"

Browse source 
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:
patrickhlauke 2018-10-15 23:25:44 +01:00 committed by XhmikosR
parent 9164f77269
commit 8883ccb205
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/tests/unit/carousel.js
View file

@ -19,7 +19,7 @@ $(function () {
var stylesCarousel = [ var stylesCarousel = [
'<style>', '<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>' '</style>'
].join('') ].join('')

13
scss/_carousel.scss
View file

@ -1,11 +1,14 @@
// Notes on the classes: // 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. // the active slide is heading.
// 2. .active.carousel-item is the current slide. // 3. .active.carousel-item is the current slide.
// 3. .active.carousel-item-left and .active.carousel-item-right is the current // 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. // 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. // is the upcoming slide in transition.
.carousel { .carousel {
@ -13,7 +16,7 @@
} }
.carousel.pointer-event { .carousel.pointer-event {
touch-action: pan-y pinch-zoom; touch-action: none;
} }
.carousel-inner { .carousel-inner {