Борьба с мобильным меню слайдов в Safari

У меня есть простое мобильное раздвижное меню с использованием jquery и CSS-переходов. Ниже приведена ссылка jsfiddle.Борьба с мобильным меню слайдов в Safari

Он отлично работает в Chrome и Firefox, но в Safari (8.0.6) фиксированное меню (элемент href с классом «.menu-toggle» не скользит вправо с телом, хотя это в контейнере тела.

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

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>

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%;

Вот это веб-страница я на самом деле, используя его, если вы откроете его в сафари вы увидите, что я имею в виду. Измените размер браузера, чтобы отобразить мобильную раскладку.

http://theomjones.com

Любые идеи?

источник

2015-08-03 senojoeht

Я смог получить .menu-toggle, чтобы сместить сафари, если я изменю его стиль от position: fixed до position: absolute.

Он работает на вашем сайте и ничего не нарушает.

EDIT: я был в состоянии получить те же результаты, что и выше и поддерживать фиксированный характер навигационной панели. Вам нужно добавить одну строку с $('.menu-toggle') в JS и добавить .menu-toggle в стиль перехода CSS. Эта скрипка показывает рабочий код https://jsfiddle.net/3byd8ntt/5/

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

источник

2015-08-03 21:50:45

Это работает, но это означает, жертвуя фиксированную навигационную панель, которые я предпочел бы, чтобы иметь. Спасибо за предложение. – senojoeht

@senojoeht Ах, извините, я смог добиться такого же поведения и сохранить фиксированный характер навигационной панели. Проверьте мое редактирование выше. –

Блестящий! Большое вам спасибо, что работает отлично. – senojoeht

слово предостережения. Мобильное сафари не перерисовывает полотно до тех пор, пока прокрутка не остановится. Это приводит к тому, что фиксированные элементы (в зависимости от того, как они используются) появляются в поле зрения, а затем исчезают после остановки прокрутки.

Вы должны использовать Ios тренажер, который поставляется с Xcode вместо изменения размера окна браузера, поскольку есть различия между мобильными и настольными браузерами

источник

2015-08-03 22:04:50

Борьба с мобильным меню слайдов в Safari

ответ

Смежные вопросы