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

  • CATEGORY : WEB関連

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

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

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

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

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

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

※lightbox系のjQueryの動きがおかしくなることもあるので設置の際に動きをみてみてください

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

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

参照サイト:

記事TAG : ,


Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PROFILE

MeteorDrive ネコノ

戦略的な提案型デザイナーとして日夜奮闘しています( ゜д゜)ノ

詳細情報はこちら

Amazon SEARCH

ENTRY RANKING