iOS: Make divs not have a shadow on touch

2012.08.09 | HTML5, iOS, Web Development | ,

Similar to a previous Android issue, except this time for iOS.  It’s not really a problem per-se, but it can make your UI look less clean.  What happens by default in mobile webkit is that when you hold your finger on an element, a grey transparent box is overlayed on it.  To remove this, use the following CSS property:

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

What really matters is the last value in the 4 values, which sets the opacity to 0, in other words, makes it transparent.