iOS8.4.1にアップデートされたiPhoneやiPadのsafariで起きてる問題。

a:hoverにopacityをつけると、hoverに1タップ消費されてしまい、2タップしないとリンク先に飛ばない事件。

まずはこのサンプルを見て欲しい↓
サンプルページPCのブラウザでクリック

 3つのボタンを並べている。

1つめはhoverで色がかわる。
2つめと3つめはhoverでhover:0.5にしていて、半透明になるようになっている。
マウスをのせてみるとそのとおりになるよね。

クリックしてみても、普通にリンクとして次のページに飛ぶ。



んじゃ次にiOS8.4.1にアップデートされたiPhoneのsafariで同じページを見てみてほしい。
↓QRカメラでもいけるよ!
chart

 そして、各ボタンをタップしてみてほしい。

・・・・・

おわかりいただけただろうか...(怖い声で) 


1つめのボタンは普通にタップでページ遷移するのに、
2つめと3つめのボタンは、1度目のタップで、ページ遷移せずになんと半透明になってしまうんだ!!! 

a:hover{opacity:0.7}

などと設定するとhoverで1タップ消費されてしまう事変。

iOS8.4.1からおこる現象だから、最近登場したピカピカの新人バグだ(バグなの?)

これ、ユーザビリティを著しく下げるよね。

ユーザーはページ遷移したくてボタンをタップするのに、何の変化もしない。
(ように見える。実際は少し透明になってる。)

「なんだよこのサイト。壊れてるのかよ」

ってなる。

実際僕は普通に調べ物をしてて、どこかのサイトでそう思った。

これはコンバージョンをガッツリ取りたいサイトにとっては、かなりのダメージなんじゃないかと思う。



■レスポンシブに悪影響

普通のスマホサイトだったらhoverなんて設定してないだろうし、この問題 でダメージを負うことはないかもしれない。

一番やられるのはレスポンシブサイトじゃないだろうか。

レスポンシブはpcでもスマホでも同じソース&cssを読ませたりするから、aタグには当然hoverがついていたりするし、hoverにはopacityがついていたりする。


■jsで対処してみる

jQueryでiOSの場合のみhoverでも遷移するというのを書いてみた。
これをそのままコピペで一応使える。
target="_blank"やhref="#top"などのページ内リンクでも使えるように調整してある。

var userAgent = navigator.userAgent;
var UA_iPhone = (userAgent.indexOf('iPhone') > -1)? true:false;
var UA_iPad = (userAgent.indexOf('iPad') > -1)? true:false;

$(function() {
if(UA_iPhone || UA_iPad){
$('a').bind("mouseover",function(ev){
var link = $(this).attr("href");
var target = $(this).attr("target");
var linktype = link.substring(0,1);
if(linktype != "#"){
if(target == "_blank"){
window.open(link);
} else{
location.href = link;
}
}
});
}
});

このjsを追加したページがこちら
iOS用の処置をしたサンプルページ
 
QRはこちら
chart2

iPhoneでタップでも一応hoverで1タップ消化されずに飛ぶようになった。



■そもそもhoverでopacity等は使わないほうがいいかもしれない

上記のjsで対処はできたけど、もしiOSが今後アップデートされていってもこの問題が残るようなら、 hover{opacyty:●}という記述は使わないほうがよさそう。

半透明にしたいなら、jsでやるとか。


なんかもっと良いやりかたあるんかな。