iPhone上的jQuery/CSS导航故障

Question

我有一个导航，当你点击菜单按钮时，它会从我网站的右侧滑出。我遇到了一个问题，导航上的转换无法在iPhone上工作下面是我如何设置的：

HTML：

<nav id="main_nav">
    <ul class="nav">
        <li class="services"><a href="#services" class="anchor-animate"><span>services</span></a></li>
        <li class="portfolio"><a href="#portfolio" class="anchor-animate"><span>portfolio</span></a></li>
        <li class="contact"><a href="#contact" class="anchor-animate"><span>contact</span></a></li>
    </ul>
    <div class="social_wrapper">
        <ul class="social">
            <li class="linkedin"><a href="http://linkedin.com/in/jaredtomeck" target="_blank">Let's Connect on Linkedin</a></li>
            <li class="twitter"><a href="http://twitter.com/jaredtomeck" target="_blank">Follow me on Twitter</a></li>
            <li class="dribbble"><a href="http://dribbble.com/jaredtomeck" target="_blank">View my shots on Dribbble</a></li>
        </ul>
    </div>
</nav>
<!-- start #wrapper -->
<div id="wrapper">
    <!-- start Header -->
<header id="main_header">
    <h1 id="logo"><a href="#home" class="anchor-animate">jtwebfolio</a></h1>
    <a href="#main_nav" class="menu-link"></a>
        <a href="#" class="close-menu"></a>
</header>
    <!-- end Header -->
</div>
<!-- end #wrapper -->

jQuery：

// Add class that determines whether navigation hides or shows when menu-link is clicked
$('.menu-link').click(function(event){
    event.preventDefault();
if($('#main_nav').hasClass('open')){
    $('#main_nav').removeClass('open');
}else{
    $('#main_nav').addClass('open');
}
});

CSS：

#main_nav {
    background: #3B3B3B;
    height: 100%;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 7px;
    z-index: 99;
    -webkit-transition: width 0.4s ease;
    -moz-transition: width 0.4s ease;
    transition: width 0.4s ease;
}
#main_nav .nav {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
#main_nav .nav li {
    height: 33.333333333%;
    padding: 0 7px 0 10px;
    text-align: center;
}
#main_nav .nav li a {
    color: white;
    font-family: "Panefresco400wtRegular", sans-serif, sans-serif;
    font-weight: normal;
    display: block;
    font-size: .875em;
    height: 100%;
    letter-spacing: 3px;
    margin: 0 auto;
    position: relative;
    text-decoration: none;
    width: 90%;
}
#main_nav .nav li a span {
    display: block;
    position: absolute;
    top: 52%;
    width: 100%;
}
#main_nav .nav li.services {
    background: #ff8772;
    text-shadow: 0 1px 0 #ba5f4f;
}
#main_nav .nav li.services a {
      background: url(../img/navicon_services.svg) no-repeat center 41%;
}
#main_nav .nav li.portfolio {
    background: #009491;
    text-shadow: 0 1px 0 #005a58;
}
#main_nav .nav li.portfolio a {
    background: url(../img/navicon_portfolio.svg) no-repeat center 40%;
}
#main_nav .nav li.contact {
    background: #ffc845;
    text-shadow: 0 1px 0 #a7832c;
}
#main_nav .nav li.contact a {
    background: url(../img/navicon_contact.svg) no-repeat center 43%;
}
#main_nav.open {
    width: 50%;
}
#main_nav.open + #wrapper {
    width: 100%;
}
#main_nav.open + #wrapper #main_header {
    width: 70%;
}

因此，基本上，当您单击菜单按钮时，jQuery会向菜单中添加一个名为"打开"的类，如果菜单已经被单击，则会删除该类。CSS集的样式将在您单击它时显示导航，但也包含css3转换。

愚蠢的过渡在iPhone上不起作用。不过，它在一个朋友的Nexus 7上起了作用。有人能帮我弄清楚为什么菜单的转换在iPhone上不起作用吗？我试了很多方法来让它发挥作用，但如果能对它有新的认识就好了。

提前感谢！

Answer 1

也许您可以试试-webkit-transform: translate3d(0, 0, 0);函数？

下面是jsfiddle中的一个例子。它有它的缺点，但它似乎在iPhone上起作用。

CSS

#main_nav {
    background: #3B3B3B;
    height: 100%;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    z-index: 99;
    -webkit-transition:all 0.5s ease;
    transition:all 0.5s ease;
    -webkit-transform: translate3d(193px, 0, 0);
    -moz-transform: translate3d(193px, 0, 0);
}
#main_nav.open {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}