何気なく普段使っているiPhone6でサイトチェックしていたら、リンクをタップしても画面遷移が起こらず焦りましたよ。

調査してみると、iOS8.4.1が原因のようで、どうやら「一回のタップでは認識されず、2回タップして初めてリンク先に飛ぶことができるという症状」が発生している状況。

ただ全てのリンクを2回タップしないと開けないわけではないので、挙動がおかしい状況を調べていたら、一つの原因が分かりました。

発生原因

:hover擬似クラスにopacityプロパティを使って1未満の数値で透明度を指定している。

▼つまりこんな状況です。

<a href="/case"><img src="images/bn_case.jpg"></a>

a:hover {
  opacity: 0.7;
}

対処方法

そもそもスマホにhoverの設定は必要ないので、メディアクエリを使ってopacityの値を1にするか、次のようにhover時の透明度はjavascriptを使って対処しました。

<script async type="text/javascript">
$(function() {
    var images = $("img");
    for(var i=0; i < images.size(); i++) {
        if(images.eq(i).attr("src").match("bn_.")) {
            $("img").eq(i).hover(function() {
                $(this).fadeTo("slow", 0.5);
            }, function() {
                $(this).fadeTo('slow', '1');
            });
        }
    }
});
</script>

■さいごに

今回の問題はSafariだけではなくChromeでも同様の症状が起こります。一時的な不具合ならばアップデートでの解消を待てばいいですが、仮にAppleが意図的に行った仕様だとしたら・・・

サイトのスマホ対応は必須になりつつあると感じますね。