iOS8.4.1では、:hoverでopacityなどを設定していると、:hover動作が発動するのに1タップ、リンクを飛ぶのにもう1タップで計2タップしないとリンクが飛べなくなってしまいました。
この現象は数日前からWEB界隈では話題になってました。
なので一応知識としては問題が怒っているのは知ってましたが、自分ごととしてあまり認識できてなかったのでスルーしてました。
Σ！？超ビッグキーワードのキャッシングのあのサイト。スマホからタグ踏んでも飛ばないんだけど、自分だけかな。。。？
— mana(男) (@tointjp) 2015, 8月 30
さっき色んな方からアフィリリンクをクリックできないって教えていただいて、普通にクリックできたから気にしなかったけど、胸騒ぎがしてiOSを最新にしたら、画像がタップしても無反応で、原因を探っていたら、CSSでマウスホバーで画像リンクを透過していたのが原因でした、、。
— ひで (@tomohide217) 2015, 8月 30
@damebitos CSSはデザイナー任せなので、そこまで詳しくないので、微妙なんですけど、とにかくopacity: 0.7;の指定がある部分を削除しまくったら、タップで動くようになりました。ちょっと曖昧ですいません、、汗。
— ひで (@tomohide217) 2015, 8月 30
ここにきて、某ゼニエモンのアフィリンクがクリックでいない、と話題になったので、初めて危機感を覚えた次第です。
- 結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari
- iOS 8.4.1の:hover問題
- 【検証】CVRが落ちているかも？CSS:hoverがiOS8.4.1だと、２クリックしないとリンク先に遷移しない件
で、2つ目のリンクのto-Rさんでjavascriptによる解決方法が掲載されているのですが、今回はWordPressのfunctions.phpで解決する方法を書いておきます。
前提条件として
.hover:hover{
opacity:0.6;
}
のように設定されている場合を想定しています。（適宜読み替えてください）
:hoverで透明化するコード自体を省いてしまうと、PCでのユーザビリティが低下するので、そうではなく、iOSデバイスを判定して、iOSのみ:hoverで透明化するのを無効化します。
functions.phpに以下を追加
//$is_ipadを追加
function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($is_ipad) {
return true;
} else {
return false;
}
}
//$is_iphoneか$is_ipadがtrueの場合にwp_headにCSSを出力
if($is_iphone or $is_ipad){
function noHoverForIos(){
echo "<style>.hover{opacity:1 !important;}</style>"; //cssに合わせて適宜書き替えてください
};
add_action('wp_head', 'noHoverForIos');
}
何をやっているのか一応解説
WordPressでは$is_iphoneという関数があり、これでiPhoneかそうでないかを判別できます。
基本的にはコレを使ってiPhoneの場合は、.hoverのopacity（透明度）を1に固定するCSSをheadのwp_head箇所に自動出力させます。
これが後半部分のコードです。
ただ、これだとiPadには対応できないため、前半部分でiPadを判別する関数を作ってます。
WordPress以外の方や、opacityの制御の方法が違ったりクラス名が違う人は適宜読み替えてください。
とりあえず、iPhoneではこのコードで動いているのを確認しましたが、iPadは手元にないので未確認なのと、適当に書いたのでもしかしたらバグがあるかもしれないので何かあったら教えて下さい。
One thought on “iOS8.4.1で2クリックしないとリンクが飛べない問題のとりあえずの解決策 【WordPress用】”