如何去除角材料底片上烦人的点击覆盖？

Question

Here is the problem : I added the bottomsheet from angular material in my angular 12 app. It works well except on mobile phone where on each click it add a blue overlay which is annoying, I did a copy past from the material website... Does someone know what's up?

Side note, I did add primeng, maybe is primeng the problem?

Here an animated pic for reference (imgur) Click to see the picture on imgur

Answer 1

Try adding this to scss or css of the element.

-webkit-tap-highlight-color: transparent;

or

-webkit-tap-highlight-color: rgba(0,0,0,0);

Add this globally if you need

* {
-webkit-tap-highlight-color: transparent;
}

For some versions, This or a combination with above are gonna work.

:focus {
    outline: none!important; /* no outline - for most browsers */
    box-shadow: none; /* no box shadow - for some browsers or if you are using Bootstrap */
}