Check out this small jsFiddle:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
.navButton {
font-size:30px;
height:43px;
text-align: center;
}
</style>
</head>
<body>
<div style="display:inline-block">
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
</div>
<div style="display:inline-block">
<a class="navButton" href="#">Bla</a>
<a class="navButton" href="#">Bla</a>
<a class="navButton" href="#">Bla</a>
</div>
</body>
</html>
The jsFiddle works well on most browsers, except for the native browsers on LG G2 and Galaxy Note 2 phones. In these cases, clicking on the right camera links results in a white rectangle covering part of the icon to the left, like this:
When inspecting the issue using chrome://inspect, there are no changes in CSS properties when the link is clicked. There are no margin or padding colorings visible in the elements. The white rectangle appears when any of the three states are forced (:active, :hover, :focus).
Is this a bug? If so, is there a way to prevent this issue while maintaining the same rendering?
It seems that the defect is not actually a white overlay, but rather covers icons with "transparency," as demonstrated in this image with a background-color: red on the body: