開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

iPhone (iOS) でアンカー要素がクリックで動作しない問題の解決

最終更新:2017-07-06 by Joe

iPhone(iOS 8.4あたりから。iOS9も継続して発生)、なぜかSafari, Chromeで、アンカーリンク(anchor要素のhref)が動作しない問題が発生。(追記:iOS10では解決しているようです)

正確には、1回目のクリック(タップ)で、リンクに飛ばない。2回目のタップで、ようやくリンクに飛ぶ。また、アンカー要素だけでなく、javascriptのクリックイベントが全滅で同じような動作となった。

また、手持ちの端末では、Android、PCブラウザでは問題は発生ないので、iOSの問題のようです。

怪しい箇所=「:hover」

代わりに、onclickのイベントハンドラでlocation.href=’xxxx.com’などとスクリプトで処理させようとしてみたりにしてみたり、jQueryからもダメで、かなり困りました。

網羅的に調べられてないですが、挙動を調査したところ、1回目のクリックで、ホバー状態に見た目が変化していることから、CSSの擬似クラス「:hover」まわりが怪しかったです。

あと、主にブロック要素(display:block)にしている要素だけかもしれない(ここは、あまり深追いせず・・、たぶん、という感じです。)

ひとまず、CSSで該当要素の:hoverの指定を全て消去して、なんとか復帰しました。

緩和策

さすがに「hoverのスタイル一切なし」というのも厳しいので・・・、簡単に以下のように対応しました。

@media screen and (max-width: 780px) {
  a:hover{ 
    /* ホバースタイルは横幅が大きなデバイスだけ */
  }
}

iPad横にしたら780超えるんじゃ・・・とかありますけど、基本的に割合の低いユーザさんは、ごめんなさいという方針です。(まあ、2回クリックすれば、動くし、OK)useragent などで、細かい分岐設定もできそうですけど、コードを複雑にしたり、手間をかけたりしたくないのです。

ググると「javascritptで、touchendにしろ」とか書いてる記事もあるけど、該当要素をブロック(display:block)にして大きく領域をとっていると、ユーザが下にスクロールしようとして、その要素を触ると、touchendが発火してしまって、ユーザビリティ的に、ひどいことになるのでこのやり方はダメでした。

 

以上です。

閉じる