Odd behaviour of clickable <div> on Touch? - html

Question

So first of all, thank you for reading and helping me out.
I've spent the last 4 hours on the web searching for a solution for my strange problem.
Problem
I create a <div> with (click) action. Style it with CSS classes, :hover, :active and :focus. When I click it with mouse, everything is good. But when I touch it with a touchscreen, a oddly gray overlay appears (see the linked GIFs)!!
Behaviour when mouse-clicked
Behaviour when touched
Here is a snippet like my code:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
}
#btn-container:hover {
background-color: rgb( 200,200,200 );
}
#btn-container:active {
background-color: rgb( 150,150,150 );
transition: 0s;
}
#btn-container:focus {
outline: 0;
}
.standard-btn {
padding: 12px 20px;
display: inline-block;
}
html {
/* Prevent user to select text */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer, Edge */
user-select: none; /* Non prefixed version: Chrome, Opera */
}
<div id="btn-container" class="standard-btn">Touch me</div>
PS: I'm developing in Angular. I've tested this strange behaviour on Chrome for Android, Safari on iOS, Chrome, Edge, IE on Windows.
The oddity is that, for example, on JSFiddle (here) or here on StackOverflow this doesn't happen. And it doesn't happen also on another Angular app of mine.... and I wasn't able to find out WHY, CSS/HTML/JS are exactly the same between the two apps. That's crazy.

Answer 1

Ok, solved. I'll post here the solution for future reference.
I just needed to add the property -webkit-tap-highlight-color: transparent on the main button class. As it is here described, this is not a standard property. But it worked!
Referencing to the code snippet from the question, I've modified the #btn-container class, in this way:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
-webkit-tap-highlight-color: transparent; /* <-- this is new */
}