【バグ対策】iOS Safariで、リンクメニュー項目が2タップしないとリンク動作しないトラブル対応

2018.10.29　最終更新：2019.03.04
CATEGORY : WEB関連

iOS Safariのみに存在するhover属性が存在するリンク項目に対して、２回タップしないとリンク先に飛ばないバグの回避方法です(・◇・)
ajaxの読み込みで回避できる方法を紹介している先生がいらっしゃいましたので、メモします。

下記スクリプトの前に、「jquery.js」もしくは「jquery.min.js」の読み込みをお願いします( ゜д゜)ノ
バージョンは１でなってますが、２以降は未検証なので試してみてください。

	// ios ダブルタップでリンクバグ対応

	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) {
	$('#gloval-navi a , #footer-navi 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;
	}
	}
	});
	}
	});

view raw ios_link_bugfix.js hosted with ❤ by GitHub

原因は、CSSのhoverに透過処理を入れてるから！

※20190304追記
どうも「hover」以外の指定でも発生するバグということが判明。別ページのアンカーリンクを設定しただけでも発生してドツボにはまりましたわ(ﾉД`)

なので、CSSにてhoverの透過処理をしないようにすれば、自然に回避はできるのですが(；・∀・)
デザイン上やっちゃうこともあるので（笑）

これ、結構深刻な問題なので、Appleさん早く直してくださいなー(ﾉД`)ｼｸｼｸ

~~※lightbox系のjQueryの動きがおかしくなることもあるので設置の際に動きをみてみてください~~
※20190209追記
lightbox系のjQueryの動きがおかしくなるのを確認。このプログラムを使うなら「lightbox系」の処理を使用しないようにするか、このプログラムを外して、CSSのhover指定に透過処理をしないようにしたほうが無難かもです。

※20190304追記
改めてコードを直しました。8行目の「a」の項目を、グローバルナビメニューとフッターメニューのIDを加えて、このスクリプトの対象範囲を狭めることで、コンテンツ内にあるlightbox系のjQueryと同居できました！なぜ今まで気が付かなかったか…(ﾉД`)

参照サイト：