【ハマった】Androidだとプルダウンの表示がうまくいかない

Androidだとプルダウンメニューがうまく動作しない!?

 

先日、『お客様からHPの管理画面のプルダウンメニューがスマホで見るとプルダウンしてもすぐ消えてしまうのでなんとかしてほしい!』というお問い合わせをいただきました。

 

当初原因が全く不明で、普通にjQueryを使ってプルダウンメニューを動かしていると思っていたので、とくにおかしいと思うところはなかったんです。・・・・が、Consoleで動きを見てみるとなんとも意味不明なエラーが・・・!!!!

 

これです。

 

Androidが悪いわけではなくChromeのせいだった!?

 

最初は普通にHTMLの組み方がおかしくて、入れ子にきちんとなっていないから表示がうまく行っていないと思っていました。
でも、FireFoxでは動くし、iPhoneのChrome系ブラウザは問題なく動作しているので、そういうわけではなさそうですし、何よりTwitterBootStrapを使っていて、何年も前からあった今回のシステムで不具合報告がなかったので、別にHTMLがおかしいとかそういうことななさそうでした。

 

結局、他の要因はなさそうだったので、上のエラーが原因っぽかったです。

 

TwitterBootStrapを使っているからなのか、jQueryのバージョンが古いからなのかGoogleさんの方でこのように判断されてしまう理由は定かでかではありません。。

 

ちなみに、同じAndroid端末でも、Google系のブラウザがこのエラーで、firefoxなどは問題なく動作していたので、おそらく今回のお客様からのお問い合わせいただいた件はこれが原因です。

 

本当はこれをFixするのに、passive:true,falseを指定するなどで回避できるらしいのですが、今回に限ってはTwitterBootstrapを使っている上、他のページなどにも影響を及ぼしかねないので、jQueryをべた書きして無理やりメニューを出せるようにしました。

 

参考にしたサイトは
Android Chrome beta (v.56) でdocumentに対するtouchイベントのpreventDefaultが効かない

Treat Document Level Touch Event Listeners as Passive

です。

 

まとめ

 

今回はTwitterBootStrapを使っていることと、TwitterBootStrap及びjQueryのバージョンが古く、かつ他のページにもBootStrapを使っていたり、ひとつのテンプレートを膨大な数のHPに使用していたりということがあり、下手にBootStrapの中身を変えたり、jQueryを変えたりすることができなかったので、このFixにかなり時間を費やしました。

 

BootStrapを使用しているので、本来であればいちいちjQueryべた書きとか、クラスを追加してCSSまでいじるとかしなくてよかったのに・・・。

 

途中何度もスマホから管理画面に入らなければいいのに・・・とか、管理画面はPC用の設計であってスマホで使用するために設計されていないのに・・・とか心のなかで思いながら半日がかりでFixしました。

 

まぁ、Google先生がTouchイベントに関しておっしゃっているので、そこは対応せざるをえないので今回はFixできただけ良かったです。

 

 

 

※追記※

こちらは追記になりますが、上記の改修後スマホ(iPhone iOS 最新)でいくつかのプルダウンメニューが開けないという事象が発生しました。
原因としては、新しいjQueryを追記したにもかかわらず、前のTwitterBootStrapで使用していたjQueryのクラスが残っていて動作に不具合が生じたというものでした。
PC及びConsoleのスマホviewでは問題なく動作しているように見えて、TwitterBootStrapで使用していたjQueryのクラスが残っていたメニューは開き具合がおかしく、最初のNoticeが右下に出ていました。。。
ここはしっかり気をつけなきゃいけないとこでした!!!
また一つ勉強になりました。

 

 

 

1 thought on “【ハマった】Androidだとプルダウンの表示がうまくいかない”

コメントを残す

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