-
-
Notifications
You must be signed in to change notification settings - Fork 7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No Ripple effect in Vuetify 1.3.0 using Electron (vue-cli-plugin-vuetify) #5340
Comments
What options did you select when creating the project and initialising the plugins? |
Vue CLI preset: Default |
It is a bug. I'm pretty sure that the cause of that is undefined variable It stays like that in result CSS too: transition: $ripple-animation-transition; In version 1.2.10 there was a variable Blame @nekosaur and @johnleider 😉 |
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. |
I can't reproduce this issue. |
@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 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. 😉 |
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? |
@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 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 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' |
@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: 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. |
That explains why I couldn't reproduce it, decimals are |
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.
The text was updated successfully, but these errors were encountered: