SSENSE/vue-carousel

Bug: Sliding on mobile causes whole page to slide.

Open

#380 opened on Mar 3, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
bughelp wanted

Description

Bug Report

Current Behavior When I slide the carousel on android, the carousel scrolls as expected - but I can also see typical indicators of the page not being able to scroll left anymore. image On iPhone, the same effect - the carousel scrolls but the whole pages "tries" to scroll left as well.

Input Code and steps to reproduce The bug is only reproducable on mobile!

You can see this on my github pages (but I think any instance of vue-carousel has the same feature).

  • { REMOVED }
  • Go to step 3 ("Determine the time"/"Bestem tidspunkt" - you can change the language)
  • Try to scroll the hours left/right
  • You'll see the whole page tries to move left/right as well.

Babel configuration

module.exports = {
    presets: ["@vue/app"]
};

Expected behavior/code I would like the page scrolling, while touching the carousel, to be disabled.

Environment

  • "@babel/core": "7.0.0-beta.47",
  • Node 8.9.1, NPM 5.5.1 (why is this relevant?)
  • OS: Windows 10

Contributor guide

Tech stack
vuejavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic Vue.js understandingfamiliarity with touch events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The bug occurs when swiping the carousel on mobile, causing the whole page to scroll. To fix, inspect the carousel's touch event handling in the Carousel.vue component. Likely the issue is that touch events are not being properly prevented from propagating. A common solution is to add `touch action: none` CSS to the carousel container, or call `e.preventDefault()` on `touchmove` events. Look at the existing event listeners for `touchstart`, `touchmove`, and `touchend` to ensure they are consuming the events. Test on a mobile device or emulator.