[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
Version
3.2.33
Reproduction link
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
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.