Vuetify: No Ripple effect in Vuetify 1.3.0 using Electron (vue-cli-plugin-vuetify)

[4eveRS]

Versions and Environment

Vuetify: 1.3.0
Vue: 2.5.17
Browsers: Electron 2.0.11
OS: Mojave 10.12

Previously worked in:

Vuetify: 1.2.10
Vue: 2.5.17

Steps to reproduce

Create a project following the guidelines:

vue create my-app
vue add electron-builder
vue add vuetify
npm run serve:electron

Expected Behavior

Buttons should have ripple effect

Actual Behavior

No ripple effect is present, even when I tried to set it using tje component property ripple.

---

Additional Comments:

I think maybe this is caused by the new tree shake?
I test with other versions 1.2.9, 1.2.8, 1.2.7 and all worked perfectly.

[KaelWD]

What options did you select when creating the project and initialising the plugins?

[4eveRS]

Vue CLI preset: Default
Pre-made template: yes
Custom theme: no
Custom properties: no
Icon font: material icons
Font as dependency: yes
A-la-carte components: no
Babel/polyfill: yes
Locale: english

[taai]

It is a bug. I'm pretty sure that the cause of that is undefined variable $ripple-animation-transition used here:
https://github.com/vuetifyjs/vuetify/blob/v1.3.0/src/stylus/components/_sliders.styl#L198

It stays like that in result CSS too:

transition: $ripple-animation-transition;

In version 1.2.10 there was a variable $ripple-animation-transition, but in version 1.3.0 it is not defined anymore, there are variables $ripple-animation-transition-in and $ripple-animation-transition-out defined instead.
You can compare:
https://github.com/vuetifyjs/vuetify/blob/v1.2.10/src/stylus/settings/_variables.styl#L303
https://github.com/vuetifyjs/vuetify/blob/v1.3.0/src/stylus/settings/_variables.styl#L316-L317

Blame @nekosaur and @johnleider 😉

[KaelWD]

Looks like that variable was removed by #5059, but is a separate issue. I'll spin up a CLI project soon and have a look.

[KaelWD]

I can't reproduce this issue.

[taai]

@KaelWD Download and open the compiled ZIP file of the version 1.3.0 ( https://github.com/vuetifyjs/vuetify/releases/tag/v1.3.0 ), open the vuetify-v1.3.0.css file and in the line 8610 you will see this line:

  transition: $ripple-animation-transition;

– this is how you reproduce this issue. 🙃

For me this issue exists in SASS when trying to include that CSS file – SASS starts complaining about that [used but undefined] variable. CSS is free, in CSS files there should be no dollar signs. 😉

[KaelWD]

I agree that line shouldn't be there, but it has nothing to do with buttons. I followed the instructions you provided and could not find the problem you described. Does the issue only occur because SASS can't find the variable, do ripples work correctly if you load the vuetify CSS normally instead of through SASS?

[taai]

@KaelWD Who cares about ripples if they can't compile SASS at all (it throws errors)?! 😉 Forget about SASS or Electron, check the CSS specification and you will not find $ripple-animation-transition as a value of CSS property transition. CSS preprocessors replaces variables with defined values. Apparently CSS preprocessor Stylus doesn't throw errors about used but undefined variables and it has left the $ripple-animation-transition as a legit CSS value (which it is not).```

The browser doesn't care, it will ignore invalid CSS properties and/or values, so probably you will not notice the problem in your browser right away. I don't know what exactly uses the CSS class .v-slider__thumb-container:before , I only know that it uses that variable and that causes me problems. Version 1.3.0 and that in this issue there is something to do with a ripple effect and the variable contains the name "ripple"... I did my quick research thru the git history and I'm pretty sure this is the problem.

I don't use Stylus, so I can only guess how that variable got into resulting compiled CSS file (SASS, for example, throws errors in such cases)... But this is definitely a bug.

I got rid of this bug by compiling the CSS myself until this issue gets fixed:

$ripple-animation-transition := 0.4s cubic-bezier(0, 0, 0.2, 1)
@import '~vuetify/src/stylus/main'

[4eveRS]

@johnleider @KaelWD The bug still persists, but I found the solution to it.

When creating the new animation/transition of the ripple effect, there's a lot of divisions that can lead to decimal values.

These calculations were introduced when the new ripple effect code was implemented.

Link to the updated ripple effect files

Using electron at version @2.0.X or @3.0.x, or even utilising an older version of chrome, makes all the divisions lead to a decimal value using "," instead of ".", knowing that, there's is a issue in older versions of chrome, that makes it only reproduce animations/transitions with a decimal value using a "." and not a ",".

Example:
transition: width 0.3s; (works).
transition: width 0,3s; (fails)

It's a know bug at chrome and was only fixed in chrome v68.0.3409.0 which is not currently supported by any stable version of Electron.

Link to the explanation of the bug in vue/chrome/electron

So when dividing a to calculate the radius and all for the new ripple effect, it can lead to numbers with decimals, which lead to the know bug. That's why I was having intermittent ripple effects. Sometimes the calculation works perfectly and sometimes it makes a decimal and doesn't work at all.

So the fix is easy as it only requires a: .replace(',', '.')) in the variables that control the duration on the transition.

[KaelWD]

That explains why I couldn't reproduce it, decimals are . in my locale.