iOSのsafariでTwitter Bootstrapのdropdownがうまく動かない場合の対処法

まぁメモ的なアレです。

iOS6にしたタイミングか、TwitterBootstrapを2.2.2にアップデートしたタイミングなのかどちらか不明なのですが、気がついたらiPhone4のsafariでナビバーのドロップダウンが効かなくなっていました。それの対処法です。

iOS6のsafari上でのTwitterBootstrapのメニュー動作画面

上記画像のとおり、ナビバーを開いたあとドロップダウンリストを表示させるためにメニュー(Archeves)をいくらタップしても無反応です。

iOS6のsafari上でのTwitterBootstrapのメニュー動作画面

本来はこの様にリストが表示されます。

色々調べると下記のような問題があるようです。

https://github.com/twitter/bootstrap/issues/4756

上記リンク先に対処法が書かれていました。

どうやら2.1.0からの問題らしいのですが、以前の環境(iOS5+Bootstrap2.1.1)では動いていたのでいろいろな組み合わせで発生するようです。

bootstrap-dropdown.js (2.2.2)
の144行目付近に下記のコードを追加

 .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

(私はbootstrap-dropdown.jsファイルは直リンだったのでローカルに落として修正・・・)

この方法でiPhone4(iOS6)のsafariで無事メニューがドロップダウンされることを確認しました。

次のバージョンでまともに動くことを祈ります・・・。

[`evernote` not found]

コメントを残す

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

*