CSSのtap-highlight-colorが効かない時の対処法

今日ハマったこと。

タイトルにもありますが、タッチデバイス制作時に使うcssの「tap-highlight-color」が効かない現象が発生。タップしてもリンク領域の色がなーーんも変化しない。押したのかも分からないし、どこをタップしたのかもわからない。

ググっても出てくる記事は、以下のような記述でtap-highlight-colorの指定ができますよって内容ばかり。

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

でも、僕の場合はこれを指定しても効きません・・・。

タップした時に出るタップ領域を示すOS標準のハイライトカラーすら付かない。

ぬーん、困った。と隣の席のデザイナーに聞いたら、「カーソルつけると効くよ！」とのこと。そうなんです、僕の場合はそもそもa要素じゃなくspan要素とかでリセットボタンを作っていたので、tap-highlight-colorのデフォルトの薄いグレーすらも付かなかったのです。

なのでspanかなんかに適当なクラス名をつけて、こんな記述をしてあげれば、ちゃんとハイライトされるようになります。

.btn-reset{
-webkit-tap-highlight-color:rgba(0,0,0,0);
cursor:pointer;
}

タップ時の色を変える必要がない時は、-webkit-tap-highlight-colorの1行も必要ありません。iOSやAndroid標準のタップカラーが適用されます。

以上でやんす。