I am facing an issue with an icon that has interactive functionality. When I click on it, a visibility class toggles. However, when I try to interact with it on my phone, a blue marker appears on top of the icon during the process which does not look very professional. You can see this in the image below where the icon is clicked.
https://i.sstatic.net/smtNe.png
This issue does not occur in any of my computer's browsers.
Here is the CSS code for the icon:
width: 22px;
height: 21px;
position: absolute;
top: 0;
right: 0;
margin: 14px;
cursor: pointer;And here is the HTML code:
<img src="assets/images/heart_empty_icon.png" id="unlike" ng-click="changeLikeIcon()" />I have created a jsfiddle example with the element here and tested it on my phone with the same result. Can anyone help me understand why this happens and how to solve it?