UPDATE 11/01/2013: Thanks to Robin for pointing this out, the recent Bootstrap 2.2.2 release has addressed this issue. Refer to their changelog for details.
Ran into an issue today during development where I was updating my company’s code source from Twitter Bootstrap 2.03 to 2.2.1.
All was fine and dandy until I was doing some cross-device testing, specifically on the iPad and the iPhone.
The touch events stopped working on the Twitter Bootstrap dropdown hover menus. When you try to click on the menu item and attempt to swipe down or anywhere, the menu would disappear.
This is also happening on the official examples and Twitter Bootstrap dropdown hover documentation:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
http://twitter.github.com/bootstrap/examples/hero.html
A workaround to this that I have implemented in JS, without having to touch the original code base, is to disable the .on() event handler on the touchstart.dropdown.data-api element.
Therefore add the following line to your code source:$(document).off('touchstart.dropdown.data-api');
Until Twitter Bootstrap releases a fix for this, the code will remain in my code base for now…
For more information, see https://github.com/twitter/bootstrap/issues/5678
Comments (3)
Hi Peter! Good post. You could update it with the latest information; Twitter has updated Bootstrap to version 2.2.2 and fixed the dropdown issue. I wrote a small post about it here:
http://forwebonly.com/things-you-should-know-about-twitter-bootstrap-2-2-2/
Updated! Thanks for bringing this to my attention Robin 🙂
You’re welcome Peter. Thanks for linking to my blog 🙂