Closed kovalenk closed 1 year ago
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;
}
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;
}
}
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).
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 {
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)
Steps to reproduce
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](https://user-images.githubusercontent.com/25953935/161702752-19cc781e-69ac-4b55-9560-30b53d2a32d0.png)