Saturday, October 12

Twitter Bootstrap 3 navbar dropdown does not appear in IE9

While working with Twitter bootstrap, i came across this weird issue on IE9 only.

When clicking on a dropdown menu, the list items would not appear, they were getting hidden behind the content. However only the box shadow of the dropdown area would appear, indicating that there was more links.

I tried with updating the z-index but it appeared that, z-index was not the issue. However after debugging and disabling one CSS property at a time, i realized that the Microsoft filter property for gradient was the issue.

Removing that from .navbar class worked.

.navbar {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
}

 

Be the first one to Comment!!!

  1. I spent hours on this annoying ie9 bug. Thanks legend.

    ReplyDelete
  2. Issue exists in IE10 as well.

    ReplyDelete
  3. Thank you so much! It took me hours of pain....

    ReplyDelete
  4. Fixing this waste my time. Thank you very very much!!!!

    ReplyDelete