fix(slider): suppress console warnings in Chrome for Android when scrubbing (videojs#5219)

bcdarius · gkatsev · commit 59869b9d49c1 · 2018-06-05T13:32:38.000-04:00
Instead of calling preventDefault() on touchstart in Chrome, set touch-action: none style on progress control to prevent unintended scrolling. Fixes videojs#4650.
diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
@@ -6,6 +6,7 @@
   @include flex(auto);
   @include display-flex(center);
   min-width: 4em;
+  touch-action: none;
 }
 
 .video-js .vjs-progress-control.disabled {
diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js
@@ -4,6 +4,7 @@
 import Component from '../component.js';
 import * as Dom from '../utils/dom.js';
 import {assign} from '../utils/obj';
+import {IS_CHROME} from '../utils/browser.js';
 
 /**
  * The base functionality for a slider. Can be vertical or horizontal.
@@ -145,7 +146,16 @@ class Slider extends Component {
   handleMouseDown(event) {
     const doc = this.bar.el_.ownerDocument;
 
-    event.preventDefault();
+    if (event.type === 'mousedown') {
+      event.preventDefault();
+    }
+    // Do not call preventDefault() on touchstart in Chrome
+    // to avoid console warnings. Use a 'touch-action: none' style
+    // instead to prevent unintented scrolling.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+    if (event.type === 'touchstart' && !IS_CHROME) {
+      event.preventDefault();
+    }
     Dom.blockTextSelection();
 
     this.addClass('vjs-sliding');

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`@include flex(auto);`
`7`	`7`	`@include display-flex(center);`
`8`	`8`	`min-width: 4em;`
	`9`	`+ touch-action: none;`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`.video-js .vjs-progress-control.disabled {`