Search code examples
htmlcss-positionfixedcss3pie

Horizontal scrollbar appears on ios devices when the position is fixed

I did a mobile navigation, what appears on the left when the user opens it. The navigation is fixed and it pushes the content to the right. I added overflow:hidden for body, and it removes the scrollbar on desktop but not on ios.

Style:

body{
    padding:0;
    margin:0;
    overflow:hidden;
}

.opened-navigation#navigation {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}

#navigation {
    width:240px;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    background:yellow;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.opened-navigation#content {
    -webkit-transform: translate(240px, 0);
    -moz-transform: translate(240px, 0);
    transform: translate(240px, 0);
}

#content {
    background:red;
}

HTML

<div id="navigation">Nav</div>
<div id="content">Content
    <strong><a href="" id="opennav">Open Navigation</a></strong>
</div>

Javascript

$(document).ready(function(){
    $('#opennav').click(function(e){
        e.preventDefault();
        $('#navigation, #content').toggleClass('opened-navigation');
    });
});

When I add overflow:hidden for html it works, but on desktop it crops some of my elements. What is the solution?

Online version: http://psd-labs.com/demo/

Solution

  • I added position:relative; to body. I don't know why, but it fixed the problem.