jQuery Mobile: Enable Tap Highlight Color
By default Mobile Webkit assigns additional styles to forms, links and JavaScript clickable elements. You may have seen the highlighted box with round corners when you click on a link or focus an input field on your mobile device. Personally I find this annoying and they make a Rich Media Application(RMA) look like shit, but some clients will insist that usability is an issue when this default behavior is disabled.
By default jQuery Mobile disables this behavior and relies on custom button states and input field focus styles. I’ll admit that there is a little inconsistency when tapping a button, but double tapping by a low percentage of inexperienced users does not justify crayola-fying an otherwise elegant looking RMA… in my opinion.
Until the majority of the population familiarizes themselves with the Mobile Web, here is a backup solution to enable this behavior in jQuery Mobile.
Find the .ui-mobile-viewport class in the core CSS file: Delete or comment out -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* responsive page widths */
.ui-mobile-viewport {
margin: 0;
overflow-x: hidden;
-webkit-text-size-adjust: none;
-ms-text-size-adjust:none;
/*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
}
That’s it! And of course if you want to change the color or opacity you can by adjusting the rgba(red, blue, green, alpha); values in the -webkit-tap-highlight-color: property. For more details on -webkit-tap-highlight-color and other useful Mobile Webkit CSS extensions, see the Safari CSS Reference.
I’m also not a fan. “Crayola-fying” the interface looks “old” and gives more of an impression that something is wrong. There are more subtle that may not be noticeable to the novice user, but provide a better experience for the rest of us.
[…] http://www.interactivebynature.net/blog/wordpress/2011.07.13.jquery-mobile-enable-tap-highlight-colo… […]
There is a serious usability issue with small links when the tap highlight is disabled: if the new page takes a few seconds to appear, during that time you can’t be sure whether you’ve actually hit the link.
Of course, one could blame this on the size of the links, but if that’s part of the design, you have little choice but to turn the tap highlight back on.