どうも、くーへいです。
制作している段階で少し詰まった部分がありましたので、メモの意味も含めて記事にしたいと思います。
iPhoneやiPadでタッチが反応しない?
あるお客さんから、サイトの動作が重いということで、改善できないかという相談をいただきました。
そのサイトは、レスポンシブによって構築されており、タイトルをタッチすると中身が開く仕組みになっていたのですが、その動作が重いという相談でした。
私は所持しているスマートフォンはAndroidで、お客さんはiPhone。
Androidではサクサク動くため、社員にiPhoneを借りて検証していましたが、不思議な現象が起きていたのです。
ざっと動作をまとめると以下のような感じでした。
Android : 不具合無し
iOS 8.1.1 : 不具合無し
iOS 8.4.1 : タイトルを2回タッチしないと内容が開かない
どうやら、タイトルを2回押さないと内容が開かないため、お客さんは動作が遅いと感じたようでした。
しばらくは原因が分からず、悶々としていました・・・。
原因はhoverの動作に対するiOSの不具合
原因が分からないまま、しばらく時間が過ぎた後、社員の1人から重要な情報がもたらされます。
iOSには「hover」の動作に不具合がある
何とも、全く予想もしていない展開でした。
そもそもスマートフォンサイトにおいて、hover動作を意識することが無く、まったくもって考慮していませんでした。
結論から言いますと、
- 1回目のタッチはhoverのCSSが適用される
- 2回目のタッチはその要素に紐づけられていたイベントが実行される(リンク先に飛んだり、JavaScriptを実行したり)
というように感じます。
※ちなみに、ブラウザ依存の問題ではありませんので、iOS 8.4.1であれば、SafariでもChromeでも発生するようです。
対処方法
そもそも、スマートフォンサイトにおいて、hoverの動作は必要ないケースがほとんどでしょう。
PCサイトにてCSSで「:hover」やJavaScriptで「hoverイベント」を使用しているのであれば、スマートフォンサイトでは無効にするべきです。
そうすれば、上記のような動作の不具合は発生しません。
ちなみに、iOS 9.0においては修正されています。
とはいえ、iOS 8.4.1を使用している方はまだまだ多いはずですので、hoverイベントは外しておきましょう。
まとめ
こういった事象に対処するのもフロントエンドエンジニアの仕事ではありますが、情報を入手するのもフロントエンドエンジニアの重要な仕事ですね。