読了: 約 3 分

スマートフォンのサイト、ウェブアプリ制作時に気になるが、半透明のあいつですよね。
webkit-tap-highlight-colorのデバイス毎、タグ毎の挙動の違い、
結局タップした時のタップ領域を可視化するための方法は何がベストなのかをメモしていきたいと思います。

webkit-tap-highlight-color(半透明のあいつ)をごにょごにょしてみる

androidでをデフォルトではオレンジの枠がつきますよね。
その枠がwebkit-tap-highlight-color(0,0,0,0)ではないのに効かない時は
だいたい中のaタグで囲んでいても、中の要素が小さいときはその要素に対して効いている可能性が高いです。
aタグに高さ指定しても効かないと思われます。
検証端末は、xperia so-02cです。

<a href="">
	<div>
		<p></p>
	</div>
</a>

Androidと-webkit-tap-highlight-color

解決方法

タップのハイライトカラーを消す

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

結局下記のような方法をとりました。
hoverだったり、tap時に下記をclass等で付与してあげるのが良いかもしれないです。
色々なところでバグとして書かれていますが、androidでtapの認識位置が異なっているので、
それをぴったり合わせるのに無駄な工数を使いたくなかったので。

background-color: rgba(0,0,0,.35);

JavaScript

簡単ですが、tapColorみたいなclassを作成しておきます。
下はelmをclassをつけたセレクタを指定。

elm = $('任意のセレクタ');
elm.bind('touchstart',function(ev){
	var elm_tap = $(ev.currentTarget);
	elm_tap.addClass('tapColor');
});
elm.bind('mousedown',function(ev){
	var elm_tap = $(ev.currentTarget);
	elm_tap.addClass('tapColor');
});
elm.bind('touchend',function(ev){
	var elm_tap = $(ev.currentTarget);
	elm.removeClass('tapColor');
});
elm.bind('mouseup',function(ev){
	var elm_tap = $(ev.currentTarget);
	elm.removeClass('tapColor');
});

これをタップした時に反応させたい領域にclassをふってあげればOK
touchmoveにつけるのはやめた方がいいと思います。

なぜなら、コレくらいのアニメーション+実行される頻度の高い処理の為に、
動かしている最中常に動いてしまうのは勿体ないからです。

スマホのブラウザアプリを作成している中で、CSS3で出来る事が多くなってきて、
さらにJSでもアニメーションをつけたりすると負荷が多くなってきます。

少しでもスマートな見せ方が出来るように工夫したいですね。