iPhone6でリンクをタップしても開かないのはiOS8.4.1が原因でした

2015年09月11日
follow us in feedly

何気なく普段使っている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が意図的に行った仕様だとしたら・・・

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

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ