On iOS devices, when you click on something you get this black semi-transparent layer for a second or less. What if you would to hide it?
To get rid of it you can apply this css rule:
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
It says every single “a” elements will be black (the 3 first values of the rgba function) and completely transparent (the last value, 0 means fully transparent, 1 means fully opaque).
-webkit-tap-highlight-color is an iOS css rule so you’re targeting only Apples devices.
But this selector is a bit to wide, adjust it in each case, something like this would be maybe more appropriate:
.btn, input, select, .navbar a,
.close-btn, .etcetera {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
As a side note, be aware that you may need to add an !important at the end of the rule to make it override every thing. Usually !important are considered as bad practice but here you’re targeting only iOS devices and on a very limited use case.
Resources
* Official Apple Documentation (with many other iOS css rules)
