Off-Canvas 菜单的 CSS 溢出 x 问题

Question

我正在尝试创建 Canvas 外菜单，该菜单应该从右侧显示。 在我的 body 元素中，我的菜单有一个导航标签。 Nav 标签的绝对位置和 right 属性设置为负值，因为它应该位于浏览器窗口之外。 Body 的宽度为 100%，overflow-x 设置为隐藏。 我使用 jquery 在 body 元素上切换 css 'opened' 类，这会将 body 向左移动并出现 nav。

HTML 部分:

<a href="#" class="openMenu">MENU</a>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>        
        </ul>
    <nav>

CSS部分:

body{
    position: relative;
    overflow-x: hidden;
    width: 100%;
    left: 0;
    top: 0;
    background: orange;
}

body.opened{
    left: -150px;
}

nav{
    position: absolute;
    right: -150px;
    top:0;
    background: grey;
    width: 150px;
    z-index: 99999;
}

body, body.opened{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

a.openMenu{
    position: absolute;
    top: 0;
    left: 50%;
    color: white;
}

ul{
    list-style: none;
}

nav ul li a{
    color: white;
}

Jquery 部分:

$('a.openMenu').click(function(){
    $('body').toggleClass('opened');
    return false;
});

如下所示:http://jsfiddle.net/EwCVH/
实例:http://vital-element.com

在 PC 上一切正常，但是当我在手机上打开它时，overflow-x 属性不再起作用，我可以水平滚动并查看隐藏的导航，该导航应该仅在单击时打开。

我尝试将隐藏的overflow-x属性添加到html标签中，它确实隐藏了触摸设备上的水平滚动，但是当我尝试打开菜单时，只有主体向左移动，菜单被overflow属性隐藏(我认为) 。

有什么建议吗？ 谢谢。

Answer 1

没有科学的解释，但是改变滑动导航元素的位置来解决这个问题，android不再认为导航是视口(viewport)的一部分。

现在我使用 2 个具有正确属性的类，我使用 jquery 更改它们，具体取决于菜单位置。

.menuRight{
    right: -150px;
 }

 .menuLeft{
    right: 0px;
 }