v-ripple.early on cards is not mobile-friendly

[nbtravis]

Is your feature request related to a problem? Please describe.

I'm a big fan of Quasar and greatly appreciate that it offers v-ripple and v-ripple.early (which I assume was intended for touch screens). However, it triggers every time you lightly touch, even if you're scrolling quickly. On most native mobile apps that feature cards with rippling (e.g. many news apps or social network apps), the rippling effect won't trigger if scrolling quickly.

Describe the solution you'd like If scrolling quickly, don't trigger v-ripple, or in my case it is specifically when using QCard or QCardSection, so it could be tailored specifically to that use-case.

Describe alternatives you've considered The main alternative for me as a mobile app developer would be to either use a flat UI that doesn't use rippling for cards, or to find a way to engineer this feature.

Additional context Add any other context or screenshots about the feature request here.

[pdanpdan]

Please do a small test form me: replace in package.json "quasar": "^1...." with "quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.13.0-beta.8" and report here if it fixes the problem.

Cleanup node_modules and yarn.lock / package-lock.json and do yarn/npm install.

[nbtravis]

I made the change, deleted package-lock.json and node_modules/, then ran npm install and got the following error upon running quasar dev -m pwa:

These dependencies were not found:

* core-js/modules/es6.array.fill in ./node_modules/quasar/src/utils/dom-morph.js
* core-js/modules/es6.array.find in ./node_modules/quasar/src/components/form/QForm.js, ./node_modules/quasar/src/components/tabs/QTabs.js and 1 other
...

I do like the new multi-color progress bar so far though..

[nbtravis]

Btw, it also told me To install them, you can run: npm install --save core-js/modules/es6.array.fill core-js/modules/es6.array.find

but when I ran the command I got: npm ERR! Could not install from "core-js/modules/es6.array.fill" as it does not contain a package.json file.

[nbtravis]

Ok I got it working with npm install --dev core-js@2.6.5 thanks to this thread: https://github.com/quasarframework/quasar/issues/6741.

IT WORKS!!! That's fantastic.

[nbtravis]

nit: I'd probably tune it to be slightly less sensitive still to make it comparable with other apps (e.g. currently you have to scroll very quickly for it to be disabled; it should disable even if scrolling less quickly).

But this is great! Thank you

[pdanpdan]

Just to check, what versions of quasars packages you have? (do a quasar info in the project folder and paste here, please).

[pdanpdan]

Can you try a new one? "quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.13.0-beta.9"

[nbtravis]

Operating System - Darwin(17.3.0) - darwin/x64 NodeJs - 14.3.0

Global packages NPM - 6.14.4 yarn - 1.22.4 @quasar/cli - 1.0.5 cordova - Not installed

Important local packages quasar - 1.13.0-beta.9 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 1.9.6 -- Quasar Framework local CLI @quasar/extras - 1.9.0 -- Quasar Framework fonts, icons and animations eslint-plugin-quasar - Not installed vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces. vue-router - 3.2.0 -- Official router for Vue.js 2 vuex - 3.4.0 -- state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @capacitor/core - 2.3.0 -- Capacitor: cross-platform mobile apps with the web @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed @babel/core - 7.10.5 -- Babel compiler core. webpack - 4.43.0 -- 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.11.0 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.7.1 -- Script for registering service worker, with hooks typescript - 3.8.3 -- TypeScript is a language for application scale JavaScript development

[pdanpdan]

you might get into trouble with nodejs 14 - better stay with 12 until a solution is found for file watchers

meanwhile test "quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.13.0-beta.10"

:)

[nbtravis]

Ok trying now..

[nbtravis]

In this version it seems to be triggering every time again (from my quick scrolling test)? I was hoping it could trigger even less often than your previous version.

[nbtravis]

You could probably create a simple feed of lorem ipsum cards to test on your end since it may require a few iterations to get it in tune with other apps (e.g. google news).

Btw, this is a different issue, but to make the rippling super mobile friendly (or at least more in line with existing apps), the default opacity could be lower to make the ripple less dark. On my end, I manually added

.q-ripple { opacity: 0.3 }

to my CSS. Maybe ideal is even lower like 0.2.

Thanks for all your help! This will be a big improvement for people using Quasar for mobile.

[pdanpdan]

hmm, are you sure it's not ok with beta.10? I tested both on android and ios and it's fine for me

on what device are you testing?

[dumdum7]

Why was this closed? It doesn't seem to be solved. Tested on latest v2.3.3 on the Material Ripple documentation page. Same behavior as when issue was created.

It really takes away from Quasar mobile apps feeling more like native apps. Also, pretty much every other material UI framework seems to have this solved: Vuetify, Angular Material, Material UI.

[pdanpdan]

If you use Qv1 there is a solution. For Qv2 I'm sorry

[dumdum7]

If you use Qv1 there is a solution. For Qv2 I'm sorry

Which solution is there for Qv1? As far as I can tell, no solution regarding this issue was merged.

Is there something about Quasar v2 that makes this impossible to resolve?

Anyway, if it's not fixed, and development is still ongoing (commits being added), shouldn't the issue stay open?

[pdanpdan]

For Q1 you can use my unofficial builds. https://github.com/pdanpdan/quasar/releases

On your risk :)

[dumdum7]

Why isn't the fix also in official builds?