Menu icon Foundation
An Off Canvas Story

So I started a new project, and I decided I wanted with off canvas from the beginning.

In this early state of the project with a hero image, a

tag with a "hello world", and a footer I tested the offcanvas.
Everything ok in the browser and on my android phone. But when I get to the ipad (mini & ios7) offcanvas stop working, the a.left-off-canvas-toggle button stop firing the off-canvas.

I didn't know why, coz I also tested on chrome for iOS and the same thing happend, or not happend(if you will). It occurs to me that I had another project with off-canvas not so empty like this new one, and when I tested in iOS bum! off-canvas worked!

After checking the structure, moving and removing some code, I get the bug (or at least my bug) I needed to add some foundation "javascript" in order to work in ios, so i use this:

<span data-tooltip></span>
            

         

And it worked!

I also tried with and empty data-topbar span.
And it worked fine too.

So I'm probably missing something in the body, or in my off canvas inner-wrap, I don't know what, maybe some default classes of foundation(I'm using it in a semantic way with Sass, some default classes i turned them off http://bit.ly/1lJgeFT ) or maybe I'm missing a prefix.

The thing is that if you have tooltips or top-bars(from foundation) in your project you're fine.

Ironic, but the blog I linked before (manofstone.com) is made with foundation offcanvas and it worked fine in safari for iOS and no "data-something" was found there.

So that, hopefully this help someone else, having an early issue, or help to improve the framework or my code errors c:
Greetings to all and pls forget my english.

PS: The other bugs I encounter with off canvas (or more with the @keyframe animations) are:

1- Only in chrome for windows(or so internet say): background-attachment: fixed behave wierd with animations. Specially if you wrap a self animated offcanvas around all your fixed backs.
Notice: this has nothing to do with Zurb, but with chrome.

2- playground's twenty twenty plugin also died with animations. So off-canvas is not a good combination with that plugin, for now.
Notice: this might have something to do with Zurb, but not direct with Foundation.

off-canvasanimationsiOS7mobilechromefixed

So I started a new project, and I decided I wanted with off canvas from the beginning.

In this early state of the project with a hero image, a

tag with a "hello world", and a footer I tested the offcanvas.
Everything ok in the browser and on my android phone. But when I get to the ipad (mini & ios7) offcanvas stop working, the a.left-off-canvas-toggle button stop firing the off-canvas.

I didn't know why, coz I also tested on chrome for iOS and the same thing happend, or not happend(if you will). It occurs to me that I had another project with off-canvas not so empty like this new one, and when I tested in iOS bum! off-canvas worked!

After checking the structure, moving and removing some code, I get the bug (or at least my bug) I needed to add some foundation "javascript" in order to work in ios, so i use this:

<span data-tooltip></span>
            

         

And it worked!

I also tried with and empty data-topbar span.
And it worked fine too.

So I'm probably missing something in the body, or in my off canvas inner-wrap, I don't know what, maybe some default classes of foundation(I'm using it in a semantic way with Sass, some default classes i turned them off http://bit.ly/1lJgeFT ) or maybe I'm missing a prefix.

The thing is that if you have tooltips or top-bars(from foundation) in your project you're fine.

Ironic, but the blog I linked before (manofstone.com) is made with foundation offcanvas and it worked fine in safari for iOS and no "data-something" was found there.

So that, hopefully this help someone else, having an early issue, or help to improve the framework or my code errors c:
Greetings to all and pls forget my english.

PS: The other bugs I encounter with off canvas (or more with the @keyframe animations) are:

1- Only in chrome for windows(or so internet say): background-attachment: fixed behave wierd with animations. Specially if you wrap a self animated offcanvas around all your fixed backs.
Notice: this has nothing to do with Zurb, but with chrome.

2- playground's twenty twenty plugin also died with animations. So off-canvas is not a good combination with that plugin, for now.
Notice: this might have something to do with Zurb, but not direct with Foundation.

Tomi Smanjak about 5 years ago

Had the same problem and this solution works. Thanks! :)

Rafi Benkual over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63