iOSの最新版8.4.1で不具合？対応したのでメモ

2015/9/25 追記
iOS9以上ではこの現象はなくなっています。不具合だったみたいです。
ただし、iOS8.4.1で止めてるユーザーがいることを想定すると対応しないといけない場合もあるかもです。
参考までにご覧ください。

現象について

発生機種

iOS最新版の8.4.1(2015年8月26日現在）

内容

aタグをタップしてもリンクせず、2回目のタップで、リンクする。

現象がよくわからない方はデモサイトをご覧ください。

デモサイト

ただ、自分で触った感じでは、aタグ以外なら大丈夫そうで、
aタグで囲んでいるimgタグなんかは大丈夫でした。

原因

aタグに擬似クラスのhoverで、opacityがかかっているのが原因です。

あえてスマホサイズの時に:hoverでスタイルを付与することはないと思いますが、
メディアクエリでレスポンシブサイトにしている場合にPC用に設定していたhoverが効いて発生するケースがあります。

不具合？仕様？

本件に関しては、不具合だから言ってる間にアップデートで元どおりになるという話や、仕様だよという話もあるようです。

不具合ならさっさと直してほしいですが、仕様というのも納得。
スマホでhoverは不要ですので。

ただ、わざわざhoverで2回タップしないとダメな仕様に変更するのはちょっとよく分かりませんが…

とはいえ、hoverアクションはopacityでサクッとつけて、そのまんまという人も多いはず。

どちらにしても取り急ぎ対処しないと、2回タップしないとリンクしないのは、だいぶユーザビリティ的にダメージでかいと思います。

ということで対処しました。

対処法

対処法いろいろありました。

1.スマホサイズでopacity:1にする。
2.PCサイズのメディアクエリにhoverを設定。

などなど。

以下サイトを参考にしました。

iOSでリンクを2回タップしないと画面遷移しない問題

iOS8.4.1以降でhoverにopacityを設定するとリンクがダブルタップしないと動いてくれない問題にでくわした話

めんどくさいけどjQueryでユーザーエージェントを判別して対処しました

メディアクエリでさくっとする方法が簡単ですが、
jQueryでユーザーエージェントを判別する方法にしました。

メディアクエリで対処しようとすると、よくある768pxを境にした場合iPadでは２回タップの不具合が残ったままでした。。

iPadは縦だと768pxギリギリOKな気がしますが、横向きにすると1024pxになってアウト。

じゃあ、メディアクエリの境目が広めのを用意しようと思いましたが、それだとPCでブラウザを小さくして見る人にhoverアクションが設定されない。。

今回の現象はiOSの時だけなので、ユーザーエージェントでiPhoneやiPadで閲覧している時だけbodyにclassを付与して、特別なスタイルを当てるようにしました。

具体的には、iPhoneとiPadでサイトを閲覧している時にbodyに特定のclassを付与。
そのclassが付いている時には、hoverでopacityが効いているところにopacity:1をあてました。

ユーザーエージェント判別の記述はこちらです。

[jQuery]

var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf('ipad') != -1) {
    $('body').addClass('ios');
}else if(userAgent.indexOf('iphone') != -1){
    $('body').addClass('ios');
}

ちなみにユーザーエージェント一覧はこちら

2015年版JavaScriptユーザエージェント判別・判定

これで、iPhoneとiPadでアクセスが来た時だけ、bodyタグにclass=”ios”が付与されます。

普通にコーディングした後、hoverでopacityをかけたaタグには、CSSの最後で、

a:hover {
     　opacity: .7;
}
.ios a:hover {
      opacity: 1;
}

としておけば不具合はなおるはずです。

不具合対応版デモサイト

デモサイト

バグなのか仕様なのかよく分かりませんが、ひとまず対処しておいたほうが良さそうです。

ただ、自分でもこの方法が絶対とは言えません。他にいい対処法があればぜひ教えていただきたいです。

Tweet

Pocket