先日、弊社宛にさるWeb担当者様からこんな問い合わせがありました。
「今iPhoneでうちのホームページ見てるんですが、バナーを押しても何も反応しないみたいなんです。何か作業しました？」
すぐに検証すべく私所有のiPhoneで対象ページを確認してみたところ、問題なくページ遷移しました。（ちなみに、Androidで確認しても問題ありませんでした。）
「うーん何でだろう。このページは2か月ぐらい更新作業を行ってないはずなんだけどなあ。」
謎は深まるばかり。。。
しかし！！
他のスタッフ所有のiPhoneで確認したところ、バナーを押しても何も反応しない現象が再現できました。
今回は、なぜそのような現象が起こったのか、Web担当者が発注の際に役立つ知識を、検証と解決方法合わせてマークアップエンジニアの白井が伝えたいと思います。
Appleは、2015年8月14日（日本時間）に「iOS 8.4.1」を、2015年9月17日（日本時間）に「iOS 9.0.2」をリリースしました。iOS9.0.2は、iPhone6s向けのに開発されたOSのため、iSO8.4.1のアップグレードで止まっている方も多いのではないでしょうか。
実は。。。
結論から申し上げると、今回のバナーを押しても何も反応しない現象は
「iOS 8.4.1のバージョンアップ」の際に発生した不具合です。
※iOS9.0.2では、この不具合が解消されているのでご安心ください。
私もiOSを8.4.1にバージョンアップして先ほどのページを確認したところ、何も反応しない現象に遭遇しました。
しかも、1度バナーをタップしてリンクが飛ばなくても、もう一度同じバナーをタップすると飛ぶようです。
いろいろ調査してみると、以下の事が原因であることがわかりました。
タービンでは画像にマウスをあてると画像を半透明にする処理（opacity）をかけるようにしています。
これはマウス系のイベント（以下hover）なのですが、スマホには当然マウスは存在しません。今まではマウスがあってもなくてもhoverの処理をしてくれており、問題なくページ遷移できていました。
しかし今回のバージョンアップに伴いiOS8.4.1からは、hoverを1クリックとして判定するようになったようです。iPhone以外にもiPadを最新バージョンにして閲覧しても同じ現象になりました。
問い合わせがあったページのソースを確認してみたところ、バナーにマウスオーバーしたときにopacityが入る処理が入っていることが確認できました。
では、他のマウスオーバーアクションはどのようになるのか検証してみましょう。
下記にいくつかのスタイルを適応したテキストリンクを記述するので、お手持ちのiPhoneにて該当するテキストリンクをタップしてみてください。
※ページを閲覧するときは、iOS8.4.1のiPhoneまたはiPadで確認をお願いします。
テキストリンクに以下の設定をしました。
a:hover{
opacity:0.7;
}
画像だけでなく、テキストリンクでもhover時にopacityを設定するとリンクが飛ばない事がわかりました。ちなみにopacityを1にしたときは問題なく遷移しました。
テキストリンクに以下の設定をしました。
a:hover{
color: #ff0000;
}
テキストカラーも変わりますし、ページ遷移できました。
テキストリンクに以下の設定をしました。
a:hover{
background-color: #ff0000;
}
こちらも問題なくページ遷移しました。
どうやら、opacityの処理をしたときに問題があるようです。
PCサイトとスマホサイトがそれぞれ存在する場合は、スマホサイトを制作するときにマウスオーバーの処理を外せば問題ないのですが、1ソースで管理するレスポンシブWebデザインの場合はこの方法では解決できません。
そこで私が考えたjQueryを使った解決方法を公開したいと思います。
タブレットやスマホで閲覧しているときは、opacityの処理をしないようにします。
（例）
var agent = navigator.userAgent;
if(agent.indexOf('iPhone') == -1 && agent.indexOf('iPad') == -1 && agent.indexOf('iPod') == -1 && agent.indexOf('Android') == -1){
$('.opImg').each(function() {
var img = $(this);
img.hover(
function() {
img.css('opacity', 0.7);
},
function() {
img.css('opacity', 1.0);
}
);
});
}
opacityを処理するクラス（.opImg）をスマホまたはタブレットで閲覧したときは、取り除くようにします。
if(agent.indexOf('iPhone') == -1 && agent.indexOf('iPad') == -1 && agent.indexOf('iPod') == -1 && agent.indexOf('Android') == -1){
if($('.opImg').size()){
$('.opImg').each(function(){
$(this).removeClass('opImg');
});
}
}
これを行うことによって、スマホで閲覧したときバナーをタップしても問題なくページ遷移することができます。ほかにもやり方はありますが、参考にしていただけたらと思います。