Footer menu not showing in Safari

Question

The site in question is: http://www.twisted-perfectionism.com

I have this #secondary_nav which should appear at the bottom of the screen on mobile devices. It's working fine in both Firefox and Chrome, but in Safari it doesn't appear at all. Using Developer Tools I can see that it is placed correctly but it's invisible. I'm a newbie.. Please help!

@media only screen and (max-width : 880px) { [...] #secondary_nav {
    width: 100%;
    height: 12px;
    padding-top: 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../images/trans.png) repeat;
}

#secondary_nav > ul {
    clear: left;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
    display: block;
}

#secondary_nav > ul > li {
    width: auto;
    display: block;
    clear: none;
    float: left;
    list-style: none;
    position: relative;
    right: 50%;
}

#secondary_nav ul li ul {
    left: 0;
    margin-right: 0;
}

#secondary_nav ul li ul li a {
    text-align: left; 
} [...] }

The problem was fixed by removing:

overflow: auto;

The footer appears now, but on iOS, when scrolling down, the iOS bottom bard disappears and the footer doesn't come down until i take my finger off the display.

See screenshot: http://s29.postimg.org/7r49yfzc7/Photo_17_05_14_02_06_16.png

Answer 1

It wotks if you take out the overflow: auto in the style for #control, it's cutting of the #secondary_nav:

#control {
        width: 34%;
        min-width: 300px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        overflow: auto; /* Take this out */
        -webkit-box-shadow:  0px 1px 7px 0px rgba(00, 00, 00, .7);
                box-shadow:  0px 1px 7px 0px rgba(00, 00, 00, .7);
        background: url(images/trans.png) repeat;
}

As far as I can tell it doesn't mess up anything else either.

Answer 2

On line 1068 of your stylesheet the #footer is set to display: none and there's nothing to override that on small screens. (On desktop browsers, an inline style of display: block is inserted.)

Answer 3

Can you show me you html markup?

But by the way try this

    @media only screen and (max-width : 880px) { 
     #secondary_nav {
       width: 100%;
      height: 12px;
      padding-top: 16px;
      position: absolute; /* Try with absolute positioning*/
      bottom: 0;
      left: 0;
      background: url(../images/trans.png) repeat;
     }
    }

Answer 4

Try to add this !important rule:

#control {
    width: 34%;
    min-width: 300px;
    position: fixed !important;
    top: 0!important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 999 !important; 
    overflow: auto; /* Take this out */
    -webkit-box-shadow:  0px 1px 7px 0px rgba(00, 00, 00, .7);
            box-shadow:  0px 1px 7px 0px rgba(00, 00, 00, .7);
    background: url(images/trans.png) repeat;
}