Offcanvas 菜单 - CSS 过渡不适用于 iphone 3 和 4

Question

我正在构建一个带有非画布菜单的网站，只是通过浏览器堆栈在 iphone 3 和 4 上查看它，但是当我点击导航触发图标时，菜单没有从右侧滑入，或者我应该说主要内容不会向左滑动以显示菜单。它适用于 4S 及更高版本，因此它似乎不适用于 iOS 3、4 和 5，但适用于 6 及更高版本

我在 Brackets 中使用了自动前缀，它添加了 webkit 前缀，但仍然不起作用。

非常感谢任何帮助。

代码如下：

         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <div class="nav-trigger-container">
        <label class="ion-navicon" for="nav-trigger"></label>
        <a href="" class="ion-ios-email-outline"></a>
    </div>

    <!-- HERO BOX -->
    <div class="site-wrap">
        <header>
        <div class="row">
            <div class="hero-text-box">
                <h1>Creative zest</h1>
                <h2>for print & web.</h2>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper, enim in fermentum facilisis, enim sem sollicitudin leo, ut tincidunt eros dui eget felis.</p></blockquote>
                    <cite>Sheryn Moore&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Implementation Manager&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Wesleyan brand refesh</cite>
            </div>
        </div>     
    </header>

<!-- ABOUT ME -->
    <section class="freelance-graphic-designer-marc-lemmon">
        <div class="row">
            <h2>Senior Creative Design Consultant<br/>
                & UI Developer</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non diam mollis, mollis dui nec, molestie massa. Ut consectetur tempor nunc vitae interdum. Fusce vel diam ac tortor auctor commodo non ut metus. Donec sollicitudin augue pretium, semper nisi vitae, ultrices diam. </p>
        </div>
    </section>

    **CSS**

    /* ----- Moving the nav trigger to the right when it is clicked ----- */
.nav-trigger:checked + label {
    right: 220px;
}

/* ----- Moving the content wrapper to the right when menu icon is clicked ----- */
.nav-trigger:checked ~ .site-wrap {
    right: 200px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

/* ----- Creating the smooth slide action ----- */
.nav-trigger + label, .site-wrap {
    -webkit-transition: right 0.2s;
    transition: right 0.2s;
}

提前致谢。

马克

Answer 1

您正在“正确”设置动画的过渡属性是否为“label”和“site-wrap”元素定义了起始值？当您尝试转换右/左属性时，您还需要定义它的默认起始值​​，否则它将默认为“自动”。

也许这会解决它：

.nav-trigger + label, .site-wrap {
    -webkit-transition: right 0.2s;
    transition: right 0.2s;
    right:0;
}