The box-style category dropdown on Chrome forces a scrollbar due to an issue with the line-height and CSS properties. simon noticed that Safari and iOS display the dropdown properly, while Firefox creates a gap between categories.
The problem was identified as being related to the overflow property and baseline alignment of inline-block elements (simon). Two possible solutions were found:
.badge-wrapper.box span from overflow: hidden; to overflow: visible;vertical-align: text-top on the .category-dropdown-menu badge-wrapper.box link, which also allows for max-width and ellipsis truncation on the category name span.When the box-style category badge is used, it always forces a scrollbar in the category dropdown menu when using the latest Chrome browser. With Firefox .cat div is pushed down, producing a gap between categories, but it doesn’t force a scrollbar. With Safari and iOS it displays properly (no gap between categories and no scrollbar.)
It seems to have something to do with the line-height. The css for making the badge is kind of complicated.
Thanks to Stack Overflow:
Here’s what’s causing the problem:
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
Changing .badge-wrapper.box span from overflow: hidden; to overflow: visible; fixes it.
Edit: Setting vertical-align: text-top on the .category-dropdown-menu badge-wrapper.box link accomplishes the same thing, but would allow you to set a max-width on the category name span and have the name truncated with ellipsis. (there’s currently no max-width on the menu’s box-style category span.)
