La barre de défilement horizontale apparaît sur les appareils ios lorsque la position est fixe

J'ai fait une navigation mobile, ce qui apparaît sur la gauche lorsque l'utilisateur l'ouvre. La navigation est fixe et pousse le contenu vers la droite. J'ai ajouté overflow:hidden pour le corps, et il supprime la barre de défilement sur le bureau, mais pas sur ios.La barre de défilement horizontale apparaît sur les appareils ios lorsque la position est fixe

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'); 
    }); 
});

Quand j'ajoute overflow:hidden pour html cela fonctionne, mais sur le bureau, il recadre certains de mes éléments. Quelle est la solution?

Version en ligne: http://psd-labs.com/demo/

Source

2015-04-15 user1452062