CODEWITHSUNDEEP
htmlcssgoogle-chromesafari
senojoeht
senojoeht

Reputation: 312

Struggling with a mobile slide menu in Safari

I have a simple mobile sliding menu using jquery and CSS transitions. Below is a jsfiddle link showing it.

It works fine in Chrome and Firefox, but in Safari (8.0.6) the fixed menu (the a href element with a class of ".menu-toggle", doesn't slide right with the body, even though it's within the body container.

https://jsfiddle.net/3byd8ntt/3/

The HTML

<body class="menu">


<nav class="menu-slide" id="sliding-menu">
    <ul class="mobile-list">
        <li><a href="#pg1">One</a>

        </li>
        <hr>
        <li><a href="#pg2">Two</a>

        </li>
        <hr>
        <li><a href="#pg3">Three</a>

        </li>
        <hr>
        <li><a href="#pg4">Four</a>

        </li>
        <hr>
        <li><a href="#pg5">Five</a>

        </li>
        <hr>
    </ul>
</nav>

The CSS

.menu-toggle {
position: fixed;
width: 100%;
background-color: #333;
z-index: 1;
-webkit-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
}

.menu {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.menu-open {
    left: 231px;
}

.menu-open .menu-slide {
    left:0;
}

.menu-slide,
.menu {
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    transition: left 0.3s ease;
    -webkit-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
}

.menu-slide {
    background-color:#333;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;

}

.mobile-list {
    color:black;
}

.mobile-list li {
    display: block;
    color: black;
    padding: 5px;
    width: 100%;
}

.mobile-list a {
    color: black;

}


#sliding-menu {
    background-color: #fff;


}

.menu-toggle img{
    padding: 5px;
    background-color:  #333;
    opacity: 1;
    height: 45px;
    opacity: 1.0;
    color: white;
    width: 45px;
}

.menu-toggle {
    padding-left: 5px;
    font-size: 20px;
    color: white;
}

.menu-toggle p{
    position: absolute;
    display: inline-block;
    padding-left: 5px;
    padding-top: 5px;
    font-family: Roboto, sans-serif;
}
.menu-toggle:hover {
    text-decoration: none;
    color: white;
}

.menu toggle:visited {
    text-decoration: none;
    color: white;
}
.menu toggle:active {
    text-decoration: none;
    color: white;
}
.ico-wrapper {
    width: 100%;

Here is the webpage I'm actually using it on, if you open it in safari you'll see what I mean. Resize browser to show mobile layout.

http://theomjones.com

Any ideas?

Upvotes: 1

Views: 2357

Answers (2)

Mike G
Mike G

Reputation: 668

I was able to get .menu-toggle to slide in safari if I change it's style from position: fixed to position: absolute.

It appears to work on your website without breaking anything.

enter image description here

EDIT: I was able to get the same results as above and maintain the fixed nature of the nav bar. You need to add the one line with $('.menu-toggle') to the JS and add .menu-toggle to the CSS transition style. This fiddle shows the working code https://jsfiddle.net/3byd8ntt/5/

JS

(function () {
    var body = $('body');
    $('.menu-toggle').bind('click', function () {
        body.toggleClass('menu-open');
        $('.menu-toggle').toggleClass('menu-open')
        return false;
    });
})();

CSS

.menu-slide,
.menu,
.menu-toggle {
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    transition: left 0.3s ease;
    -webkit-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
}

Upvotes: 2

Justin McKee
Justin McKee

Reputation: 156

A word of caution. Mobile safari doesn't repaint the canvas until after scrolling has stopped. This causes fixed elements (depending on how they're used) to pop into view and then disappear once scrolling has stopped.

You should use ios simulator that comes with xcode instead of resizing your browser window as there are differences between mobile and desktop browsers

Upvotes: 0

Related Questions