挣扎于 Safari 中的移动幻灯片菜单

Question

我有一个使用 jquery 和 CSS 转换的简单移动滑动菜单。下面是一个显示它的 jsfiddle link。

它在 Chrome 和 Firefox 中工作正常，但在 Safari (8.0.6) 中，固定菜单（具有 class 的“.menu-toggle”的 href 元素，不即使在 body 容器内，也不要随 body 向右滑动。

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

这是我实际使用它的网页，如果你在 safari 中打开它，你就会明白我的意思。调整浏览器大小以显示移动布局。

http://theomjones.com

有什么想法吗？

Answer 1

如果我将它的样式从 position: fixed 更改为 position: absolute，我可以让 .menu-toggle 在 safari 中滑动。

它似乎可以在您的网站上运行而不会破坏任何内容。

编辑： 我能够获得与上述相同的结果并保持导航栏的固定性质。您需要在 JS 中添加 $('.menu-toggle') 行，并在 CSS 过渡样式中添加 .menu-toggle 。此 fiddle 显示工作代码 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);
}

Answer 2

提醒一句。直到滚动停止后，移动版 Safari 才会重新绘制 canvas。这会导致固定元素（取决于它们的使用方式）弹出到视图中，然后在滚动停止后消失。

您应该使用 xcode 附带的 ios 模拟器，而不是调整浏览器的大小 window，因为移动浏览器和桌面浏览器之间存在差异

挣扎于 Safari 中的移动幻灯片菜单

Struggling with a mobile slide menu in Safari

html

css

safari

google-chrome