iOSでの:hover問題
iOSデバイス（iPhone / iPad）ではCSSの:hoverがうまく働かず、ダブルタップしないとリンクが飛ばないことがあります。
上記の情報によるとiOS 8.4.1で発見され、9.0以上では解決しているとのことですが、私は2016年11月現在の最新10.1.1の環境でこの不具合が出ました…（辛）不具合っていうか謎仕様…でもまあ不具合と言って差し支えないですよね…。
iOSでHoverが効かない問題でも9系でのバグ報告があるように、hoverで画像切り替えのような凝った実装をするとまだこの不具合が出ることがあるようですね。厄介です。
ちなみに私にこの不具合が出た時の実装はこう。
index.html
style.css
a span img:first-child {
display: block;
}
a span img:last-child {
display: none;
}
a:hover span img:first-child {
display: none;
}
a:hover span img:last-child {
display: block;
}
レスポンシブサイトでaの中に２枚の異なる画像を並べ、Hover時にCSSdisplayで切り替えるというちょっと凝ったものでしたが、これがもうダメでスマホ時にiOSデバイスでどうしても１タップで遷移してくれず、ダブルタップでやっと遷移してしまう。
解決
JS (jQuery) を使って無理やり解決。
まずはユーザーエージェント振り分けでiPhoneとiPadの時は強制的にリンク先、またはアンカーに飛ばすようにします。
そして、0.1秒未満の瞬間的なタップ時と、0.5秒以上のロングタップ時にはHover時の画像置換をする条件分岐を加えました。
結果的に0.1秒から0.5秒間のタップがあった時だけ、強制的にリンク先、またはアンカーに飛ばすという仕様。
感圧センサー対応はどうするとか、時間設定とか深く考えずに作りましたが、案外これで違和感なくできました。
function.js
$(function () {
var userAgent = navigator.userAgent;
var UA_iPhone = (userAgent.indexOf('iPhone') > -1) ? true : false;
var UA_iPad = (userAgent.indexOf('iPad') > -1) ? true : false;
var touched = false;
var touch_time = 0;
//iPhone,iPadを判定
if (UA_iPhone || UA_iPad) {
$("#link").bind({
'touchstart mousedown': function (e) {
touched = true;
touch_time = 0;
document.interval = setInterval(function () {
touch_time += 100;
// 短すぎるタップとロングタップ時の処理
if (touch_time >= 500 || touch_time < 100) {
e.preventDefault();
}
}, 100);
},
'touchend mouseup mouseout': function (e) { // マウスが領域外に出たかどうか
if (touched) {
// ちょうどいいタップ時の処理
if (100 < touch_time
所感
日本では圧倒的なシェアを持つスマホの王者iPhoneを無視するわけにもいかないので、ひとまずはこういう細かい謎仕様にも地道に対応していくしかないですねー。
あとはベンダーにバグ報告というのもいいかもすね。
また「こっちのやり方の方がいいよー」とかあったら教えていただけると嬉しいです。
ありがとうございました。
元記事はこちら
