CSS: Using Overflow Scroll to Quash Bugs

The Challenge: Navbar dropdown contains a lengthy IA with clipped text that is hidden on multiple browsers. Scrolling down presents another challenge where the dropdown collapses upward.

The clipped dropdown content bug

The dropdown collapse bug that appears midway down the page

The Solution:

1. Identified the parent div for the dropdown menu by traversing DOM tree and flipping “display:none” on and off. (NOTE: Also noticed expanding navbar height on hover but ruled that behaviour out as a possible cause of the bugs after testing.)
2. Found inline CSS on the div setting the behaviour. Confirmed that this was injected by an iMIS script. The approach then turned to using CSS and “!important” commands to overwrite the injected CSS.
3. Set a fixed height to the parent div and added an “overflow: scroll” to complete the override.
4. Tested the changes on different browsers and device sizes.
5. Scrolled up and down the page to identify when the collapse bug appears.
6. Using developer tools, noticed a negative pixel Top attribute getting set at a certain point.
7. Used a Top override and added to new custom class as shown below: