症状
iOS上でリンクをクリックしても、リンク先に遷移しない
しかし、もう一回クリックすると遷移する
SafariでもChromeでも同じ症状
AndroidやPCブラウザでは症状が出ない
原因
iOS8.4.1以降の、CSSのopacityの扱い方が原因。
対策
リンク部分のclassに
opacity:none;
を指定する。
症状が発生するバターン1
画像リンクで発生
<style>
.link_image{
opacity:0.6
}
</style>
<a href=”link.html”><img class=”link_image” src=”link.jpg”></a>
症状が発生するバターン2
リンクではなく、jQueryによるcss変更でも発生
<style>
.link_image{
background:url(‘link.jpg’);
}
<script>
jQuery(‘.link_image’).click(function() {
jQuery(‘.link_image’).css(‘background’,’none’);
jQuery(‘.link_text’).css(‘display’,’block’);
});
</script>
<a id=”link_image”>
<span class=”link_text”>リンクします</span>
</a>
それぞれ
<style>
.link_image{
opacity:none;
}
</style>
にすれば1クリックでリンクされる。
サイト内に
<style>
a:hover {
opacity: 0.8;
}
</style>
のような設定がある場合は要注意。