Subscribe on changes!

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

avatar
Apr 16th 2022

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
avatar
Apr 16th 2022

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.