Home » Featured, Headline, 設定

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

2013 / 1 / 23 コメント募集

まぁメモ的なアレです。

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]

どうぞこの記事に関するコメントをお寄せ下さい

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

これらのタグのみ使用出来ます:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*