Menu icon Foundation
Off-canvas nav issue on iOS8

We just deployed our newly redesigned, fully-responsive ecommerce website:

http://furniture.cort.com/storefront/

The off-canvas nav however is not working correctly on iOS devices (iphone and ipod touch) after the new iOS8 update. It worked fine on the previous version. The issue we're seeing is when you toggle open the off-canvas navigation, you can only access the menu that is visible, which on an iphone/ipod touch is missing several links that are below the visible screen area. You can not scroll down to those hidden links either, trying to scroll down the menu only shows a blank gray area with the menu cut off. Closing the menu you are able to see the entire length of the page.

Anyone else seeing this issue? Or have any suggestions on a fix?

off-canvas naviOS 8

We just deployed our newly redesigned, fully-responsive ecommerce website:

http://furniture.cort.com/storefront/

The off-canvas nav however is not working correctly on iOS devices (iphone and ipod touch) after the new iOS8 update. It worked fine on the previous version. The issue we're seeing is when you toggle open the off-canvas navigation, you can only access the menu that is visible, which on an iphone/ipod touch is missing several links that are below the visible screen area. You can not scroll down to those hidden links either, trying to scroll down the menu only shows a blank gray area with the menu cut off. Closing the menu you are able to see the entire length of the page.

Anyone else seeing this issue? Or have any suggestions on a fix?

tony almost 5 years ago

We found the fixed off-canvas was not acceptable early on, mainly when you were near the bottom of the page calling the menu might show a blank grey bar. So we used a different off-canvas method which allows for scrolling, luckily we were not that far into development. Sorry:(

Johan almost 5 years ago

We had this problem too and I hope i fixed it by changing the overflow-y value from "auto" to "hidden" in the off-canvas-menu mixin (line 84 in _offcanvas.scss).

Overflow issues/fixes always are tricky, so we deployed it and are now waiting for feedback of the users.

Jose almost 5 years ago

Hi i had the same issue last week, i broke my head thinking it was a javaScript issue for the scroll event changed in iOS 8 but just like Johan i solved it with an overflow-y added to the div that contains the ul list of your menu, not the wrapper of the off canvas, and i added an specific height of 480px so it can scroll inside the screen

i will reserch and look at what may be causing this, i think i could be a bottle neck on javascript events and the CSS reserves an event for the scroll when you declare the overFlow

thanks

Fidel Torres over 4 years ago

Hello, i have issues with the off canvas, and now after a few test it is working perfectly all i have done is add a couple off missing things... data-offcanvas & href="#" to see where the changes are needed look at https://github.com/zurb/foundation-5-sublime-snippets/pulls

My user is T04435