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を組み合わせて自前でフォーカス実装した。