Off Canvas not working on ios 8.1

[phil9690]

The off canvas doesn't seem to work on IOS 8.1 with Chrome version 31 and Safari version 8. It shows the transparent overlay, but not the toggled content.

If I go to http://foundation.zurb.com/sites/docs/off-canvas.html, the examples work, but it won't work with the gem. I have tested it in IOS 9 with the latest versions of Chrome and Safari, and Ubuntu with Chrome and Mozilla. It works fine with all of these.

I've tried disabling turbolinks and starting with a new app using examples from the off canvas docs, but I still can't get it to work in IOS 8. There are no errors in the JS console and I'm using the latest gem version 6.2.0.1

Does anyone know what could be causing this issue?

Thanks

[hellapixels]

Hey phil9690,

Sorry you are having some issues with this component. Does it work in other browsers? If not, I think it might have to do with Motion UI not being included. If you go to foundation_and_overrides.scss you will need to un-comment the 3 motion ui files:

@import 'motion-ui/motion-ui';
@include motion-ui-transitions;
@include motion-ui-animations;

We are going to include it by default here soon.

[panigrah]

This gem did not work with the examples posted here http://foundation.zurb.com/sites/docs/off-canvas.html. I had to explicitly call offCanvas like below. Is this how i need to use offcanvas?

    $(document).ready( function() {
       $(document).foundation().ready(function() {
          var OffCanvas = new Foundation.OffCanvas($('#offCanvasLeft'), {
          open_method : 'overlap' ,
          close_on_click : true
         });
      })
   });

[zokioki]

@panigrah You shouldn't have to explicitly call offCanvas if the page has the correct markup for it to work. I'll look into why this issue is occurring.

[krismartin]

I'm experiencing the same issue on iOS6.1.3 (with Safari on iPad). It shows the transparent overlay, but not the off canvas menu. I tried including the Motion UI as suggested by @hellapixels, but it didn't work. The solution that @panigrah gave also didn't work. Any update on this?

[unsullen]

I am also experiencing this issue with foundation 6.2.3. In both Chrome and Safari on iOS 8 or below, the off-canvas menu does not display, but the js-off-canvas-exit overlay does. in iOS 9 everything works as expected on both browsers.

My SCSS includes both Motion UI transitions and transforms.

Unfortunately iOS 8 still makes up a significant enough portion of my site visitors to make this a problem. Is this still considered an open issue and a fix is being looked at?

Edit: I've just realised this is the foundation-rails repo... I found this issue via Google and should clarify my build is not a rails build!

[agencytrailblazer]

I found older safari needed -webkit- to work:

`.position-left {
-webkit-transform:translateX(-250px)
}

.position-left.is-open~.off-canvas-content {
-webkit-transform:translateX(250px)
}

.off-canvas.is-open {
-webkit-transform:translateX(0px)
}`

[ifatree]

still an issue on Safari 8 desktop as well. you can see it on the foundation homepage that the off-canvas also doesn't have -webkit-transform properties. this makes it show by default and not be able to be hidden... but once you get into the example documentation for off-canvas menus with buttons to open them on the page, it has -webkit-transform properties there. very weird it's not in the default set. use browswerstack on Yosemite (Safari 8) to see the same issue on the homepage of foundation.

[mlangone]

@ifatree I am having a similar issue, did you ever find a fix? Off canvas loads as open and won’t dismiss.

[ncoden]

If I go to http://foundation.zurb.com/sites/docs/off-canvas.html, the examples work, but it won't work with the gem. I have tested it in IOS 9 with the latest versions of Chrome and Safari, and Ubuntu with Chrome and Mozilla. It works fine with all of these.

foundation-rails uses the foudation-sites JavaScript and CSS assets. Unless with an issue with Turbolink, there should be no bug in a Rails application that cannot be reproduced in the documentation. It comes from the outdated Foundation version in this package, which has been bumped to v6.4.3 recently.

Closing. Please reopen on the right repo if you can reproduce it with Foundation v6.4.3.