「iOS」の「Safari」等、モバイル端末でウェブサイトを閲覧しているとき。
リンクをタップしても1回では反応せず、2回目でようやく画面が遷移するという現象が起きていませんか?

いま実機で調べた結果、この現象が起きるのは iPhone のみ。ソフトウェアのバージョンは「iOS 8.4.1」の「Safari」と「Chrome」で確認できています。

その原因ですが、どうやら CSS の「:hover」時の挙動によるもののようです。


例えば画像(<img>)をアンカータグで囲ってリンクを設定しているとき。

<a href="../index.php"><img src="sample.png" width="300" height="200"></a>

この画像に対して以下のようにスタイルシートを設定していたとします。

a img:hover{
	opacity:0.5;
}

上記の設定で画像をタップすると、1回目のタップでは「opacity:0.5;」の効果で画像が透過するだけです。
そしてもう一度タップすると、そこでようやくリンクが機能してページが遷移します。

仮にCSSの「opacity」を外すと1回のタップで正常にリンクが動作します。
また画像だけでなく、テキストリンクでも起こる場合がある模様。

おそらく「iOS 8.4」以降からのエラーのようです。
2回タップしないと画面が遷移しないとなるとユーザビリティが著しく低下しますので、上記のような設定を使っているサイトはスタイルシートを書き換えたほうが良さそうです。

この機会に一度、運営しているサイトのCSSをチェックしてみてはいかがでしょうか。