BLOG

スマホのナビを展開する時に下のリンクを貫通してタップできてしまう問題

スマホサイトの展開式メニューを制作

メニュー展開の発火をjQueryで行い、アニメーション等の処理はCSS3でやってしまおう的なメニューを制作していました。 メニュー本体はz-indexをネガティブに設定してコンテンツが横にスライドすればメニューが出現する仕様です。 順調にメニューは実装できたのですが、iPhoneのChromeでメニューを展開する時のタップが下のリンク要素まで貫通し、想定外のページ遷移をしてしまいました。

js

setTimeoutで処理を遅らせて解決

touchstartをclickに変更すれば問題解決しましたがtouchstartやtouchendに比べて動作がもっさりするのでなんだかなぁ〜って感じです。 clickで正常な動作をするという事はタッチ後にラグさえあれば問題は解決するということなのでsetTimeoutを使ってもう1つ処理を追加してみました。

js

pointer-eventsでアンカーを無効化

メニュー本体に初期状態でpointer-events:none;付与しアンカーを無効化し、少し遅らせてtoggleClassでアンカーを有効にしました。

css

これでChromeでも思った通りの動作になりました!

    Sponsored Links

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です