Ionic-framework: V4 - beta 7 ion-ripple-effect not working on div

Created on 5 Sep 2018 · 13Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.7
   @capacitor/core           : 1.0.0-beta.7

Describe the Bug
on beta.3 I was able to have a ripple effect on a component. Since I upgraded to beta7 the ripple only works in a <ion-button>

triage

Source

hghammoud

👍4

All 13 comments

+1, since Beta 7 the ripple effect element doesn't seem to work on all elements anymore, even the example on https://beta.ionicframework.com/docs/api/ripple-effect doesn't work properly

geferon on 11 Sep 2018

@JMMgit Thanks for this lovely workaround!

hghammoud on 12 Sep 2018

@hghammoud which workaround did you find?

I can confirm this is a bug, as already said it doesn't even work on browser. @paulstelzer on chrome 69 it works for buttons, but not for divs

giacomocerquone on 30 Sep 2018

@giacomocerquone the workaround that they had found, which was for divs and other elements in which the ion-ripple-effect didn't work, was by adding the ion-activable attribute to the parent of the ion-ripple-effect.

geferon on 1 Oct 2018

🎉1

its ion-activatable now. :D

hghammoud on 1 Oct 2018

@hghammoud wrong, on beta7 it works with ion-activable!
Thanks a lot guys!

giacomocerquone on 2 Oct 2018

Beta 12 it's ion-activatable, but it makes the whole ion-content ripple, even though I put it on a div...

amitairos on 7 Oct 2018

👍1

Beta 12 it's ion-activatable, but it makes the whole ion-content ripple, even though I put it on a div...

I have the same issue with you on beta 12. It works fine on android devices with ion-activatable but makes the whole page ripple on iOS devices.

raymond-yan on 24 Oct 2018

I found a workaround for the container bleeding the ripple effect to the content. I just add this css property to the container:

position: relative;

davl3232 on 8 Nov 2018

I think this issue has resolved in beta.17. Can anyone confirm? Or is this still an issue?

paulstelzer on 4 Dec 2018

@paulstelzer last time I shared the solution the answer was that it worked out, so I guess it could be closed

Reference: https://forum.ionicframework.com/t/how-to-use-ion-ripple-effect/146000/2

peterpeterparker on 4 Dec 2018

👍1

Indeed it works with adding ion-activatable to the parent element

amitairos on 4 Dec 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.