Let's talk now.
407-476-6930 / 850-366-8392 (PCB)

Bootstrap 3 dropdown problem on older iPads

by Brandon Welch
Web Designer/Developer & Web Expert
Connect with me: | Facebook | LinkedIn

This is something we discovered when using our favorite responsive website design css framework, Bootstrap. We noticed the problem in Bootstrap v3.1.0, though the latest version had the same problem from our tests.

The Problem:
On older iPads or possibly it is older IOS versions, navigation vertical dropdowns appear behind other navigation items. On the normal horizontal layout of the navbar, the problem did not appear. This looks like a z-index problem, but messing with the z-index no matter what you do did not seem to fix the issue for us.

Try this:
Find the .navbar-collapse class in the main bootstrap file, and remove “-webkit-overflow-scrolling: touch;”. We found several other solutions on the web, but none seemed to work for us.

We dislike having to edit the core framework file, but in this case, it was the only solution to the problem.