2

Just as the title suggests, I am making a website that utilizes the "off canvas" menu approach to save space and modernize the look and feel of the site on mobile devices.

The exact problem is that the menu itself will not move off the canvas when the page is loaded in iOS 7 on an iPad. This is not the case in iOS 6 though, when I checked it. The flyout works perfectly on my desktop when I resize the browser window.

This is what it looks like on an iPad Air with iOS 7

enter image description here

I was surprised to find that the layout actually worked as expected in iOS 6 with an earlier iPad. I am racking my brains trying to figure this out. Here is the code I am working with (note: I am using the Bootstrap 3 framework underneath all of this):

HTML HEADER

<meta name="viewport" content="width=device-width, initial-scale=1.0">

GLOBAL DEVICE-RELATED CSS

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

MENU CSS

@media screen and (max-width: $screen-tablet) {
    #nav {
      position: absolute;
      top: 0;
      padding-top: 5.25em;
    }
    #nav .block {
      position: relative;
      padding: 0;
    }

    .js-ready #nav {
      height: 100%;
      width: 70%;
      background: #333333;
    }
    .js-ready #nav .block {
      background: transparent;
    }   
    .js-ready #nav {
      left: -70%;
    }
    .js-ready #inner-wrap {
      left: 0;
    }
    .js-nav #inner-wrap {
      left: 70%;
    }
  }
}

JAVASCRIPT

// Toggle the mobile navigation off-canvas menu
$(document).on('click', '.nav-btn', function(event)
{   
    event.preventDefault();

    if ($('html').hasClass('js-nav-in'))
{
    $('html').removeClass('js-nav-in').addClass('js-nav-out');
}
    else if ($('html').hasClass('js-nav-out'))
{
    $('html').removeClass('js-nav-out').addClass('js-nav-in');
}
});

I'm sorry for the code dump, but that seems to make this a more complex issue. Any tips or suggestions anyone has would be appreciated. I am willing to completely rebuild the menu if it means that this menu would work across the bulk of tablets and mobile phones.

As a note, when I tap on the menu icon or closing x the view zooms in as if the total width of the page is less. I think this may be a complete rebuild type situation. If you know of a resource where I would be able to see how this could be properly done, I would accept it.

EDIT: The sizing seems to work in iOS 7 Safari. However, when the user swipes to the side, the menu comes out. This is still an issue, just a different one. Any helpful resources would be appreciated.

5
  • If you are fine with users not being able to zoom the page you can try and add maximum-scale=1, user-scalable=no to the meta viewport tag. Is it possible for you to post a demo of the problem?
    – Mathias
    Apr 2, 2014 at 21:51
  • Well the ideal is that users don't have to zoom in for any reason, hence a responsive design. I tried this and it didn't resolve the issue. Due to the nature of the project I can't give access to the dev site but I will try to get an example in jsfiddle asap.
    – gillytech
    Apr 3, 2014 at 17:22
  • Concerning your slide issue (from your EDIT), do you have the following attributes for your <body>class: overflow-x: hidden; position: relative; left: 0;? Apr 4, 2014 at 15:29
  • Thanks for the tip. This isn't an overflow issue (at the moment) so this doesn't help the side swipe thing.
    – gillytech
    Apr 4, 2014 at 21:04
  • I'm getting the same issue with my own off-canvas. Using my Mac's inspector to inspect Safari on the iPhone, it appears that the moment the off-canvas nav appears the viewport zooms out, so that the <html> element doesn't take up the full width of the viewport, hence you can see the remainder of the page that's outside the <html> element. I've not been able to find a solution but hope this might point you in the right direction.
    – nick
    Oct 15, 2015 at 9:29

1 Answer 1

1
+200

As a test, could you change your CSS to hide the navigation (#nav {display:none;})on top of positioning it off the page. Then have your jquery .show(); and .hide(); the nav respectively when the user clicks on the menu along with your slide in/out transition.

My gut instinct is that since the nav is technically still part of the layout (it's just off to the right, presumably with overflow:hidden on the parent container), but iOS is thinking its part of the layout and is including it somehow.

So as a test, hide the nav and I'm thinking iPad iOS7 should respect it being gone and have your "page" take up the full width of the viewport (that's my theory at least).

1
  • I'm running on no time at the moment on this project but I am going to try this test, thank you for the input! If nobody else has a compelling answer I'll award you the bounty.
    – gillytech
    Apr 6, 2014 at 2:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.