White circle issue on 'leave-active'

[kovalenk]

Steps to reproduce

1. Click on the different element like checkbox or radio button.
2. Wait 2.2 second

Which browser?

Google Chrome Version 100.0.4896.75 (Official Build) (x86_64)

Vue - v2.6.6 Vue-material - v1.0.0-beta-11

What is expected?

What is actually happening?

Reproduction Link

https://monthlyhotel.jp/search?guests_number=1&checkin=2022-04-06&checkout=2022-04-15&place_id=ChIJLxl_1w9OZzQRRFJmfNR1QvU

[AriesAlex]

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;
}

[hot50773]

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;
  }
}

[fabiankaimer]

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).

[ajdalshov]

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 {

[MrImbolo]

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)