search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.74k stars 3.5k forks source link

[BUG] QScrollArea - [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. #1240

Closed rodrigoslayertech closed 6 years ago

rodrigoslayertech commented 6 years ago

Description

The QScrollArea Component does not work!

Software version

Quasar: 0.14.7 Vue: 2.5.2 OS: Linux Mint 18.2 (KDE Version) Node: 6.12.0 NPM: 3.10.10 Browsers: Opera 49.0.2725.39 (Mozilla/5.0 (X11; Linux x86_64) Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 OPR/49.0.2725.39 iOS: - Android: 7.1.1 (Tested with Quasar Play and same problem)

What did you get as the error?

Anything in console or terminal. Only this in Verbose Mode when clicked in Menu Btn (toggleLeft):

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

in quasar.esm.js?8bfb:3453

What were you expecting?

The left or right slot appears correctly.

What happened outside the expected?

Sidebars do not appear correctly. (q-scroll-area slot="right" and q-scroll-area slot="left")

What steps did you take, to get the error?

I used this code: https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/layout/layout.vue

Full code: https://pastebin.com/zZ9qDQp5

rstoenescu commented 6 years ago

How can it not work when the demo with it works? What's your actual template?

rodrigoslayertech commented 6 years ago

Can you give me the complete Play with Layout code? With everything I need?

rstoenescu commented 6 years ago

Are you testing on a mobile device? Because on mobile device it is not needed as its purpose is to customize the scrollbar. The scrollbar does not appear on mobile.

rodrigoslayertech commented 6 years ago

I have Quasar Play open. It does not work on both!

I joined layout.vue and layout-with-play.vue and imported the layout-store.js file.

No compilation error or error in console.

rstoenescu commented 6 years ago

Paste your full template here pls. Also, are you testing on Android 7 or on desktop?

rodrigoslayertech commented 6 years ago

Tested on desktop and mobile (Quasar Play with Android 7.1.1) https://pastebin.com/zZ9qDQp5

rodrigoslayertech commented 6 years ago

Many problems!

screenshot_20171205_160904 screenshot_20171205_160516 screenshot_20171205_160509 screenshot_20171205_160503 screenshot_20171205_160632 screenshot_20171205_160616

I have no idea what's going on or how to fix it!

rodrigoslayertech commented 6 years ago

My package.json:

{
  "name": "quasar-app",
  "productName": "Quasar App",
  "version": "0.0.1",
  "private": true,
  "description": "A Quasar App",
  "author": "Your Name <your@email.com>",
  "scripts": {
    "clean": "node build/script.clean.js",
    "dev": "node build/script.dev.js",
    "build": "node build/script.build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-runtime": "^6.25.0",
    "chart.js": "^2.7.1",
    "cors": "^2.8.4",
    "cryptocoins-icons": "^2.6.0",
    "net": "^1.0.2",
    "quasar-extras": "0.x",
    "quasar-framework": "^0.14.7",
    "tls": "0.0.1",
    "vue": "2.5.2",
    "vue-chartjs": "^3.0.2",
    "vue-i18n": "^7.3.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "colors": "^1.1.2",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.28.7",
    "es6-promise": "^4.1.1",
    "eslint": "^4.8.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.0",
    "json-loader": "^0.5.7",
    "opn": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "postcss-loader": "^1.0.0",
    "progress-bar-webpack-plugin": "^1.10.0",
    "purify-css": "^1.2.6",
    "shelljs": "^0.7.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^13.0.5",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "2.5.2",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
  }
}
rstoenescu commented 6 years ago

Let's chat on gitter in an hour or tomorrow to speed things up, otherwise we're gonna make a huge thread here :)

rodrigoslayertech commented 6 years ago

Room in gitter?

rstoenescu commented 6 years ago

https://gitter.im/quasarframework/Lobby --> @rstoenescu

rodrigoslayertech commented 6 years ago

I have deleted node_modules and yarn.lock and reinstalled all.

Works now!!

But my previous bug need to be fix: https://github.com/quasarframework/quasar/issues/1184

My package.json now:

{
  "name": "quasar-app",
  "productName": "Quasar App",
  "version": "0.0.1",
  "private": true,
  "description": "A Quasar App",
  "author": "Your Name <your@email.com>",
  "scripts": {
    "clean": "node build/script.clean.js",
    "dev": "node build/script.dev.js",
    "build": "node build/script.build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-runtime": "^6.25.0",
    "chart.js": "^2.7.1",
    "cors": "^2.8.4",
    "cryptocoins-icons": "^2.6.0",
    "net": "^1.0.2",
    "quasar-extras": "0.x",
    "quasar-framework": "^0.14.7",
    "tls": "0.0.1",
    "vue": "^2.5.0",
    "vue-chartjs": "^3.0.2",
    "vue-i18n": "^7.3.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "colors": "^1.1.2",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.28.7",
    "es6-promise": "^4.1.1",
    "eslint": "^4.8.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.0",
    "json-loader": "^0.5.7",
    "opn": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "postcss-loader": "^1.0.0",
    "progress-bar-webpack-plugin": "^1.10.0",
    "purify-css": "^1.2.6",
    "shelljs": "^0.7.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^13.0.5",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.0",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
  }
}
rstoenescu commented 6 years ago

Ok, will port the fix from v0.15 to v0.14 for the workaround on vue's latest issues.

rstoenescu commented 6 years ago

Meanwhile, can we close this?

rodrigoslayertech commented 6 years ago

1) Ok, Thanks! 2) Closed! Thank for listening!

mesqueeb commented 6 years ago

Lately the same thing has popped up into my app:

[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

at quasar.esm.js?8bfb:3452 and 3453

rstoenescu commented 6 years ago

@mesqueeb what does lately mean? what version are you on ($quasar info). can you click on quasar.esm.js?8bfb:3452 and 3453 and copy paste some lines around to see the method name and more info?

mesqueeb commented 6 years ago

Quasar CLI v0.6.4 App running on Quasar v0.14.7

With "lately" I mean I never had seen/noticed it before : D

This was the function around it:

    {
        name: "touch-pan",
        bind: function(t, e) {
            var n = !e.modifiers.nomouse
              , r = {
                handler: e.value,
                scroll: e.modifiers.scroll,
                direction: ht(e.modifiers),
                mouseStart: function(t) {
                    n && (document.addEventListener("mousemove", r.mouseMove),
                    document.addEventListener("mouseup", r.mouseEnd)),
                    r.start(t)
                },
                start: function(t) {
                    var e = W(t);
                    r.event = {
                        x: e.left,
                        y: e.top,
                        time: (new Date).getTime(),
                        detected: !1,
                        prevent: r.direction.horizontal && r.direction.vertical,
                        isFirst: !0,
                        lastX: e.left,
                        lastY: e.top
                    }
                },
                mouseMove: function(t) {
                    r.event.prevent = !0,
                    r.move(t)
                },
                move: function(t) {
                    if (r.event.prevent) {
                        r.scroll || t.preventDefault();
                        var e = dt(t, r, !1);
                        return void (pt(r, e) && (r.handler(e),
                        r.event.lastX = e.position.left,
                        r.event.lastY = e.position.top,
                        r.event.isFirst = !1))
                    }
                    if (!r.event.detected) {
                        r.event.detected = !0;
                        var n = W(t)
                          , i = n.left - r.event.x
                          , o = n.top - r.event.y;
                        r.direction.horizontal && !r.direction.vertical ? Math.abs(i) > Math.abs(o) && (t.preventDefault(),
                        r.event.prevent = !0) : Math.abs(i) < Math.abs(o) && (r.event.prevent = !0)
                    }
                },
                mouseEnd: function(t) {
                    n && (document.removeEventListener("mousemove", r.mouseMove),
                    document.removeEventListener("mouseup", r.mouseEnd)),
                    r.end(t)
                },
                end: function(t) {
                    r.event.prevent && !r.event.isFirst && r.handler(dt(t, r, !0))
                }
            };
            t.__qtouchpan = r,
            ft(t, r.direction, r.scroll),
            n && t.addEventListener("mousedown", r.mouseStart),
            t.addEventListener("touchstart", r.start),
            t.addEventListener("touchmove", r.move),
            t.addEventListener("touchend", r.end)
        },
        update: function(t, e) {
            e.oldValue !== e.value && (t.__qtouchpan.handler = e.value)
        },
        unbind: function(t, e) {
            var n = t.__qtouchpan;
            t.removeEventListener("touchstart", n.start),
            t.removeEventListener("mousedown", n.mouseStart),
            t.removeEventListener("touchmove", n.move),
            t.removeEventListener("touchend", n.end),
            delete t.__qtouchpan
        }
    })

error at:

            t.addEventListener("touchstart", r.start),
            t.addEventListener("touchmove", r.move),
123mitnik commented 5 years ago

appeared on a clean install

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
preventScroll @ quasar.mat.esm.js?ac15:6
__show @ quasar.mat.esm.js?ac15:6
show @ quasar.mat.esm.js?ac15:6
(anonymous) @ quasar.mat.esm.js?ac15:6
(anonymous) @ vue.runtime.esm.js?2b0e:1833
flushCallbacks @ vue.runtime.esm.js?2b0e:1754

quasar info:

Operating System            Darwin(18.0.0) - darwin/x64
NodeJs                      10.8.0

Global packages
  NPM                       6.4.1
  yarn                      1.9.4
  quasar-cli                0.17.18
  vue-cli                   3.0.3
  cordova                   Not installed

Important local packages
  quasar-cli                0.17.18 (Quasar Framework CLI)
  quasar-framework          0.17.15 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
  quasar-extras             2.0.6   (Quasar Framework fonts, icons and animations)
  vue                       2.5.17  (Reactive, component-oriented view layer for modern web interfaces.)
  vue-router                3.0.1   (Official router for Vue.js 2)
  vuex                      3.0.1   (state management for Vue.js)
  electron                  Not installed
  electron-packager         Not installed
  electron-builder          Not installed
  @babel/core               7.0.0-beta.54   (Babel compiler core.)
  webpack                   4.18.1  (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
  webpack-dev-server        3.1.8   (Serves a webpack app. Updates the browser on changes.)
  workbox-webpack-plugin    3.5.0   (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
  register-service-worker   1.5.2   (Script for registering service worker, with hooks)
saveroo commented 5 years ago

any workaround on this ? i use many q-scroll-area, inside collapsible and drawer..