「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をチェックしてみてはいかがでしょうか。
