Console warning when using touch events

[keefyhub]

Example: link
Open dev tools and toggle device toolbar, activate a touch event by dragging the carousel item. Observe the following console warning:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Looks like a change in touch event listeners in Chrome - https://developers.google.com/web/updates/2017/01/scrolling-intervention

Possible solution at the bottom of the article:
Developers should apply the touch-action CSS property on elements where scrolling and zooming should be disabled to notify the browser before any touch events occur.

Adding:

.owl-carousel {
  touch-action: none;
}

NOTE - see comment below, dont use touch-action: none;

to the CSS seems to solve the warning, but I am not sure what effect this property has.

link to CSS property summary

[SamuelGaona]

+1

[keefyhub]

I have just found out that addingtouch-action: none; stops any scrolling in Chrome, so I tried each property one by one and touch-action: manipulation; is the only one that allowed gestures, without causing the error.

manipulation
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).

[panteleywhat]

[keefyhub]

Still an issue, waiting for an "approved for development" tag on the issue to raise the PR

[daviddeutsch]

@keefyhub I went ahead and put in the change myself, didn't want to bother you further. Thank you for your contribution!

[mckenzieja]

Can confirm. adding touch-action: manipulation; to .owl-carousel resolved the console warning.

[1naveengiri]

Working fine, Thanks @keefyhub