Vertically scrollable content breaks panning in Chrome 55 (Android and desktop)
See original GitHub issueIf the hammer’d element has vertically scrollable content, the pan event seems to break (more specifically, event.deltaX
has unexpected values). This seems to be broken as of Chrome 55,a affecting both the Android version and reproducible on touch-enabled laptops or with the DevTools touch emulator. This issue could be related to / a duplicate of #1050.
Example specimen: http://codepen.io/anon/pen/oYRQgM
Repro steps:
- Pan horizontally in the ‘not vertically scrollable’ section. Observe that panning works as expected.
- Pan horizontally in the ‘vertically scrollable’ section. Observe that the content jumps around.
Screencap:
Issue Analytics
- State:
- Created 7 years ago
- Reactions:14
- Comments:19
Top Results From Across the Web
touch-action - CSS: Cascading Style Sheets - MDN Web Docs
Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (pan-up) means that the user is dragging their finger ......
Read more >hammerjs - Bountysource
Vertically scrollable content breaks panning in Chrome 55 (Android and desktop) ... If the hammer'd element has vertically scrollable content, the pan event ......
Read more >Javascript: Any workarounds for getting Chrome for Android to ...
Assuming that you want to intercept horizontal touch events and let vertical touch events cause panning/scrolling, a workaround would be: On touchstart ,...
Read more >Take control of your scroll - customizing pull-to-refresh and ...
Turns out this behavior is called scroll chaining; the browser's default behavior when scrolling content. Oftentimes the default is pretty ...
Read more >Scrolling with pleasure - Pavel Fatin
Accurate positioning. Even though large scrolling steps can be animated, there's no way to fixate the content between the steps. High-precision scrolling makes ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@bbialas
Specifying the
inputClass
to use worked in my case:let mc = new Hammer(el, { inputClass: Hammer.TouchInput });
Seems to fix up the pen from the original issue as well.
Only works on touch devices now, so depends what support is needed …
I was in a hurry to fix so I just edited the hammer.js script locally and changed line 384 to be:
var SUPPORT_POINTER_EVENTS = false
Solved all my troubles for now, but hoping this can be addressed in the upcoming versions