何かと独特な不具合が出がちなiOS。
今回、サイト製作中に起きたのが、「ナビゲーションメニューのリンクが全く反応しない（ただしiPhoneに限る)」というものでした。
状況を説明しておくと、
- ナビゲーションはヘッダーに配置されており、一定以上スクロールするとposition: fixed で上部固定される
- 各リンク（a要素）はdisplay: block でブロック化。
- このリンクが全然反応しない
というトラブルです。
よく見る解決策
ググるとよく見るのが、「bodyタグ、もしくは要素を囲んでいるブロックに「ontouchstart=””」を追記すれば直る」というもの。
<!-- 例 -->
<body ontouchstart="">
~
</body>しかし、やってみても特に改善の気配なし。
z-indexを明記してみる
別のリンクにナビゲーションリンクが上に重なる場所をタッチしてみると、下のリンクにジャンプしたので、もしかしてz-indexを明記していないせいか？ と思ったのですが、そもそも表示はきちんとナビゲーションが上にきているわけですから望み薄です。
一応試しましたが、やはりナビゲーションは反応しませんでした。
pointer-eventsを書いてみる
まさかなと思いながら、ナビゲーションリンクに「pointer-events:auto;」を指定してやると直りました。
pointer-eventes プロパティは、none を指定してやるとリンクやデフォルトの動作が無効化されるプロパティですが、初期値がautoなのでわざわざ指定する必要は無いだろうと思っていました。
しかし、実際にこれで直ってしまったので、こういうこともあるんだなぁと思い知った次第です。
結構レアなケースではないかと思うのですが、もしこれで救われる人がいればと記録しておきます。
それにしても、iPhoneも色々独特ですね。
将来、Internet Explorerのように疎まれる存在にならないことを願います。
