Offcanvas menu - CSS transition not working on iphone 3 & 4 - ios

Question

I am building a site with an off canvas menu just looked at it on an iphone 3 and 4 via Browser Stack but when I click on the nav trigger icon the menu isn't sliding in from the right, or should I say the main content isn't sliding to the left to reveal the menu. It's working on the 4S and above so it seems it won't work on iOS 3, 4 and 5 but does on 6 and above
I've used the auto prefixer in Brackets which added the webkit prefix but that still didn't work.
I'd greatly appreciate any help.
Here's the code:
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<div class="nav-trigger-container">
<label class="ion-navicon" for="nav-trigger"></label>
</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 » Implementation Manager » 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;
}
Thanks in advance.
Marc

Answer 1

Does the transition property that you are animating "right" have a defined starting value for the 'label' and 'site-wrap' elements? When you are trying to transition the right/left properties you need to also define it's default starting value, otherwise it will default to 'auto'.
Maybe this will fix it:
.nav-trigger + label, .site-wrap {
-webkit-transition: right 0.2s;
transition: right 0.2s;
right:0;
}