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カメラでもいけるよ!
そして、各ボタンをタップしてみてほしい。
・・・・・
おわかりいただけただろうか...(怖い声で)
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"などのページ内リンクでも使えるように調整してある。
このjsを追加したページがこちら
iOS用の処置をしたサンプルページ
QRはこちら
iPhoneでタップでも一応hoverで1タップ消化されずに飛ぶようになった。
■そもそもhoverでopacity等は使わないほうがいいかもしれない
上記のjsで対処はできたけど、もしiOSが今後アップデートされていってもこの問題が残るようなら、 hover{opacyty:●}という記述は使わないほうがよさそう。
半透明にしたいなら、jsでやるとか。
なんかもっと良いやりかたあるんかな。
a:hoverにopacityをつけると、hoverに1タップ消費されてしまい、2タップしないとリンク先に飛ばない事件。
まずはこのサンプルを見て欲しい↓
サンプルページPCのブラウザでクリック
3つのボタンを並べている。
1つめはhoverで色がかわる。
2つめと3つめはhoverでhover:0.5にしていて、半透明になるようになっている。
マウスをのせてみるとそのとおりになるよね。
クリックしてみても、普通にリンクとして次のページに飛ぶ。
んじゃ次にiOS8.4.1にアップデートされたiPhoneのsafariで同じページを見てみてほしい。
↓QRカメラでもいけるよ!
そして、各ボタンをタップしてみてほしい。
・・・・・
おわかりいただけただろうか...(怖い声で)
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はこちら
iPhoneでタップでも一応hoverで1タップ消化されずに飛ぶようになった。
■そもそもhoverでopacity等は使わないほうがいいかもしれない
上記のjsで対処はできたけど、もしiOSが今後アップデートされていってもこの問題が残るようなら、 hover{opacyty:●}という記述は使わないほうがよさそう。
半透明にしたいなら、jsでやるとか。
なんかもっと良いやりかたあるんかな。