【iOS 8.4.1】CSSで :hover を指定している画像リンクは1タップしてもリンク先に飛べない場合がある

@kasumiiです。こんにちは。

iPhoneのSafariで、画像リンクを1タップしてもリンク先に飛ばないという現象が起こっています。動きとしては、2回タップしてようやくリンク先に飛べるという状態。

この現象が起こるのは、

・iOS 8.4.1のSafariでページ閲覧時
・リンク画像に :hover で opacity: 0.7 などの効果をつけている場合

です。（問題が起こるのは画像リンクのみで、テキストリンクなら1タップで正常にリンク先に飛べます。）

このブログでもリンク画像に :hover で opacity を変更させていたため、まさに上記のような現象が起きていました。

確認してみたところ、1タップで画像リンクの透明度が変わり、2タップ目でようやくリンク先に飛びました。

ひとつ前のバージョンであるiOS8.4で検証してみたところ、1タップでリンク先に飛びました。画像リンクの透明度は変化なし。

iOS8.4では1タップで飛べたので、たしかにiOS8.4.1から起こる問題のようですね。

1タップでリンク先に飛べるようにする方法は以下の通り。

1. :hoverを:activeに変更する
2. opacity: 1にする
3. jQueryを使う
結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君

わたしも一時しのぎ的ではありますが、簡単な解決方法として :hover を :active に変更してみました。

a:hover {
  opacity:0.6;
}

上記のようになっていた部分を、以下に変更。

a:active {
  opacity:0.6;
}

これで画像リンクも1タップでリンク先に飛ぶようになりましたよー！

iOS8.4.1からのこの挙動がバグなのか仕様なのかはわかりませんが、なんとなくiOS9が出てもこのままのような気がしますね。。。

ちなみにこのブログのアクセス数を見てみると、訪問者の約半分がiPhoneで閲覧していて、さらにそのうちの半分がiOS8.4.1を使用しています。ということはつまり、画像リンクをタップしてもなかなかリンク先に飛べない人が多発していたということですね……対応遅れてすみませんでしたorz

趣味のブログならまだしも、ECサイトなんかで同様の現象が起こればかなりの痛手なはずなので、しっかりチェックしておきたいですね！

iOS 8.4.1 の場合