White circle issue on 'leave-active' about vue-material HOT 5 CLOSED

this problem also occurs in md-radio and md-switch.

here's another temporary solution without !important syntax

.md-radio .md-radio-container,
.md-checkbox .md-checkbox-container,
.md-switch .md-switch-thumb {
  .md-ripple-wave.md-ripple-leave-active {
    visibility: hidden;
  }
}

from vue-material.

it seems fine on the 99th version of chrome
as a temporary solution, I used this:

.md-checkbox-container .md-ripple-wave.md-ripple-leave-active {
  visibility: hidden!important;
}

from vue-material.

This fix seems to do the trick while maintaining the ripple effect. Tested with latest Chrome, Chrome Canary, MS Edge. Also tested Safari and Firefox to see that nothing else breaks (only Chromium based browsers had this issue).

diff --git a/src/components/MdRipple/MdRipple.vue b/src/components/MdRipple/MdRipple.vue
index 1c234ff7..8b6744b3 100644
--- a/src/components/MdRipple/MdRipple.vue
+++ b/src/components/MdRipple/MdRipple.vue
@@ -149,7 +149,6 @@
     position: relative;
     z-index: 10;
     overflow: hidden;
-    -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 100%);
   }
 
   .md-ripple-wave {

from vue-material.

I'm having the same issue for md-radio, md-checkbox and md-switch. I'm on Google Chrome 100.0.4896.127 (for Linux).

from vue-material.

Hello.
Just got this issue on switch component's page on https://www.creative-tim.com
See on gif below.
Noticed, that on change in debugger dom has some strange updates at the same time when white circle pops in and out.

Browser - Brave
Version 1.38.117 Chromium: 101.0.4951.67 (Official Build) (64-bit)

from vue-material.