Горизонтальная полоса прокрутки появляется на устройствах ios при фиксированном положении

Вопрос:

Я сделал мобильную навигацию, что появляется слева, когда пользователь открывает ее. Навигация исправлена, и она подталкивает содержимое вправо. Я добавил overflow:hidden для тела, и он удаляет полосу прокрутки на рабочем столе, но не на ios.

Стиль:

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

Когда я добавляю overflow:hidden для html, он работает, но на рабочем столе он обрабатывает некоторые из моих элементов. Каково решение?

Онлайн-версия: http://psd-labs.com/demo/

Лучший ответ:

Я добавил position:relative; к body. Я не знаю почему, но это устранило проблему.

Оцените статью
TechArks.Ru
Добавить комментарий