Android Browserでクリッカブルマップを使うときの話

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

/* transparent って指定することも出来るが、iOS系では効くけど2.x系のAndroidでは消えない。
その上Androidでは rgba(200, 0, 0, 0.7) とか書いても色は変わらない。消すことしか出来ない */

これで普通、リンクとかa要素をタップしてもハイライトカラーが表示されなくなるんだけどクリッカブルマップだけはmap要素やarea要素に直接指定しようとも抑制出来ない。
outlineとかborderやら色々試したけどダメ。

そこでarea要素をちょっといじる

area {
display: block;
}

area要素だから見た目はもちろん変化しないんだけど、これでハイライトカラーが表示されなくなる。
試行錯誤でたどり着いたので、どこにも書いてないっぽいしメモっとく。

ちなみにこうするとJavaScript側でclickイベントが取れなくなったので、touchstart, touchmove, touchend, touchcancelを組み合わせて自前でフォーカス実装した。