Search code examples
jquerycssmobileadobe-edge

CSS Layout: Elements overlay after slideDown() called

I have a menu button that when clicked, calls slideToggle() on a <div> with a <ul> in it. In Chrome and Firefox on desktop, it displays like this:

enter image description here

That is, the element slides down and pushes the content below it down. That's the expected behavior.

In Chrome and Safari for iOS7 (as well as in Adobe Edge Inspect) and the Android browser on 4.1.2, however, the menu overlays the element below it in the DOM:

enter image description here

What I've Tried

  • Our good friend z-index (higher on the <ul>, even tried negative on the element below it)
  • I've tried every permutation of display CSS properties on both elements (e.g., block, display-block).
  • I've tried every permutation of position properties (one with absolute, the other with relative; one with static, the other with relative, etc.)
  • I've tried every permutation of floating and unfloating both elements.
  • I've tried adding a hard-coded height property to the menu
  • Worked with margins and padding

Note: Unfortunately, this is in a dev environment, so it's not anywhere that you can test it. I will, however, update with a js fiddle.

Edit

Here's a fiddle, but I'm having trouble getting it to work with the media queries.

Edit 2

It actually works on my phone in that fiddle, so it must be some other CSS I have.

Edit 3

I tried commenting out Foundation, the framework I'm using, and that still happens. It must be somewhere else.

Solution

  • Well, after bisecting our entire 20,000+ line CSS in the entire application, it comes down to this.

    The containing element of the nav, <div class="header-container"> had a height property of height: 50px in the CSS. Apparently, the desktop browsers I tried interpret a slideDown as making an allowance for the height of the containing element growing, and mobile browsers don't.

    Changing that property to min-height: 50px solved this issue.