8

I've noticed that a page on my web app does not scroll when Chrome is used on a touchscreen PC. To test-fix the problem, I goto chrome://flags and disable "Touch Events API". Conversely, to make the problem appear on my development machine, I enable it (the default is auto).

When Touch Events API is enabled, Chrome's console outputs:

[Violation] Added non-passive event listener to a scroll-blocking touchstart event. Consider marking event handler as 'passive' to make the page more responsive.

[Violation] Added non-passive event listener to a scroll-blocking touchmove event. Consider marking event handler as 'passive' to make the page more responsive.

This violation comes from my jquery.min.js file. The version is 2.1.3.

Questions:

  1. I don't need any touch features - can I disable Touch Events API. And/or is that best practice?
  2. Will the latest version of jQuery 'fix' this problem? I'm worried about such a big version jump...
  3. Reading into the violation advice, should I "Consider marking event handler as 'passive' to make the page more responsive." - What does that mean? There are are some JS functions that effect window size and scrolling, how could I make them passive?
Community
  • 1
  • 1
Warren
  • 1,984
  • 3
  • 29
  • 60

1 Answers1

0

Do you have a JSFiddle or code example we can test? I am wondering if there is something in your code having issues.

You may also want to look at the solution in this question as well if you have more issues. Might be a simple fix or a longer need to write your own PassiveEvent handler.

Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event

ClosDesign
  • 3,894
  • 9
  • 39
  • 62