Foundation 5.1 Off-canvas Not Working on iOS Safari (Simulator)

Question

The code below works just fine on a desktop browser (Safari and Firefox) but the menu button does not work with Mobile Safari (when I click nothing happens and I was expecting the menu to show). I have an old simulator (iOS 5) but Foundation's example code works from their page on the same mobile browser so I am not sure what I am doing wrong. For example, the advanced section in this link works just fine on the same mobile browser: http://foundation.zurb.com/docs/components/offcanvas.html and my code is pretty much a copy of theirs. JS Fiddle link here: http://jsfiddle.net/rGyKv/ Update: Changed the title to off-canvas as opposed to Topbar. ```

Accepted Answer

I encountered the same problem and after some searching I've found a hack by user vietqhoang on Github.

Using the following code to initialise foundation somehow fixed the non-clickable buttons on iOS for me.

```
$(document).ready(function() {
    $(document).foundation();

// Hack to get off-canvas .menu-icon to fire on iOS
    $('.menu-icon').click(function(){ false });
});
```

Foundation 5.1 Off-canvas Not Working on iOS Safari (Simulator)

Solution

Problem