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,

signal-2021-04-19-235635_2758×439 16.2 KB

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.

1 post - 1 participant

Read full topic