Ion-item with ripple-effect can't blur correctly when not focused

I’m using ionic angular 5.6.4

First, I added ion-ripple-effect to some ion-item with button="true".

Generally, most devices like Sony or Pixel work normally, that is, when the ion-item is clicked or pressed, the ripple effect shows as expected, and the effect disappears immediately when it is not focused.

However, on the Samsung devices with One UI, it unexpectedly leaves a “grey” item when it blurs, like the item with label Scan History Logging in the following,

The expected effect is, Scan History Logging item shows normally as other items like Camera Pause Trigger and Search Engine without any “gray” when not focused. This happens on the Samsung devices only, at this moment.

Here is the sample code,

<ion-item class="ion-no-padding ripple-parent" lines="none" detail="false" mode="ios" button>
  <ion-icon class="..." name="..."></ion-icon>
  <ion-label>Scan History Logging</ion-label>
  <ion-ripple-effect></ion-ripple-effect>
</ion-item>
.ripple-parent {
  position: relative;
  overflow: hidden;
}

What is the solution so that the display on Samsung devices works like others? Or there is any bug on the Samsung devices that I don’t know?

Thank you.

I found the solution.

Just apply --background-hover-opacity: 0; to the ion-item.

That is,

<ion-item class="button-item ...">
   ....
</ion-item>
.button-item {
  --background-hover-opacity: 0;
}

I still don’t understand why Samsung devices behave like that. My guess is ion-item with ion-activatable stays hovered once it has been tapped or focused, and the default value of --background-hover-opacity of ion-item is around 0.04.

1 Like