vuematerial/vue-material

White circle issue on 'leave-active'

kovalenk opened this issue · 5 comments

kovalenk commented

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
image
image
image

AriesAlex commented

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;
}
  • 👍2
hot50773 commented

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;
  }
}
  • 👍3
fabiankaimer commented

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 commented

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 {
  • 👍2
MrImbolo commented

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)

Animation