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

[idc77]

Version

3.2.33

Reproduction link

https://none/

Steps to reproduce

I don't really know why this is happening and how to reproduce it.
I am using quasar framework with vue.
It's not happening on my workstation, but it is happening on Chrome on Android, which I'm connected to via chrome://inspect.

What is expected?

no message or conforming

What is actually happening?

repeated messages of

runtime-dom.esm-bundler.js?9cec:319 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

---

I'm getting many console messages like this:

runtime-dom.esm-bundler.js?9cec:319 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Lines 310-320

// To avoid the overhead of repeatedly calling performance.now(), we cache
// and use the same timestamp for all event listeners attached in the same tick.
let cachedNow = 0;
const p = /*#__PURE__*/ Promise.resolve();
const reset = () => {
    cachedNow = 0;
};
const getNow = () => cachedNow || (p.then(reset), (cachedNow = _getNow()));
function addEventListener(el, event, handler, options) {
    el.addEventListener(event, handler, options);
}

so I grepped for the comment text to find out it's vue.

grep 'To avoid the overhead of repeatedly calling performance.now(), we cache' node_modules/* -R
node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:// To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.prod.js:// To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:// To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/@vue/runtime-dom/dist/runtime-dom.global.js:  // To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js:// To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/vue/dist/vue.runtime.global.js:  // To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/vue/dist/vue.runtime.esm-browser.js:// To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/vue/dist/vue.global.js:  // To avoid the overhead of repeatedly calling performance.now(), we cache
node_modules/vue/dist/vue.esm-browser.js:// To avoid the overhead of repeatedly calling performance.now(), we cache

[LinusBorg]

Please open an issue. With Quasar.

For all we can tell without any reproduction, we have to assume they add a touchstart listener in a way that leads to this warning.

The Vue code you "found" just adds the event listener defined by the developer, with the options (i.e. passive) defined by the developer.