Issues with off-canvas mobile menu in Bootstrap 3 - ios

Question

I am using offcanvas for a navigation in Bootstrap 3 that works perfectly fine in a desktop browser when the width of the window is made smaller, however on iOS devices the offcanvas part of navigation simply doesn't show once you click the menu button - it just indents -80% as you would expect - this is the case in both Safari and Chrome for iOS.
It does work in the browser and on Android devices however, just a no-go for Safari and Chrome (probably all browsers) on iOS. I have tried playing around with the CSS extensively - more changes than i can even attempt to list here - no doubt the issue is trivial.

Answer 1

I can't point a finger on what's missing right now, but I did just this the last few days on a site I'm working on. Because of my sticky header, I move the .navbar-collapse to body on small screens, by javascript.
My CSS looks like this:
.navbar-collapse {
max-height: none;
height: 100% !important;
z-index: 1000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 70%;
max-width: 400px;
padding-top: #grid-padding*2;
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
.transition;
overflow: scroll;
}
.navbar-collapse.in {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
And my js, like this
if (windowWidth > 767) {
if ($("#MainNav-collapse").parent().is("body")) {
$("#MainNav-collapse").appendTo("#MainNavBar");
}
}
else {
$("#MainNav-collapse").appendTo("body");
}