Foundation-sites: Off-Canvas v6.3 does not scroll on mobile.

[jinch]

If your off-canvas menu is longer than the visible area on mobile, you can't scroll to see the rest of the content. Scrolling only seams to work on desktop.

EXAMPLE HERE // tested in Android Chrome as well as iOS Safari. In both cases you can't scroll to see the rest of the menu when the Off-Canvas menu is open.

[jinch]

Follow up... I discovered its due to (data-content-scroll="false") that applied to keep the content area from scrolling after the menu is opened. This works great and does what it is intended but this also causes the scrolling feature on the side menus to break (only on mobile). Its strange, but the side menus still scroll on desktop but break on mobile.

Anyway to resolve this? I really would like to avoid scrolling the content area after the canvas is open but I also really need my off-canvas to scroll on mobile. : /

[brettsmason]

@jinch Thanks for reporting this issue.

I have looked into it myself and can confirm it appears to be an issue with data-content-scroll.
See this CodePen to demonstrate the bug.

I'll look into this and see if I can find a way to fix it.

[kball]

Submitted PR to address this: #9707. @brettsmason would appreciate your testing

[kball]

This was fixed in #9707, should be working in 6.3.1

[m-lamarre]

I have a question about this issue @kball 🤓
I am currently using the foundation-rails (6.4.1.3) gem on my Rails project, and I am still experiencing this issue on Android mobile devices still.

If I set data-content-scroll='' to false, I am not able to scroll in offCanvasMenu on my android device at all. When set to true I am able to scroll in the OffCanvasMenu but then the background scrolling is visible from the hamburger menu.

I see that your fix was for iOS Enable scrolling within offcanvas panel on iOS
Has this not been fixed for Android? 🤔

[m-lamarre]

Alright, well I managed to find this link:
Disable background scrolling when mobile menu is active

and I just modified the code slightly to work for Foundation 6.
data-content-scroll='true' on the #offCanvasMenu

<script>
  $('.off-canvas').on('opened.zf.offcanvas', function(e) {
    e.preventDefault();
    $('body').css('overflow', 'hidden');
  });

  $('.off-canvas').on('closed.zf.offcanvas', function(e) {
    e.preventDefault();
    $('body').css('overflow', 'auto');
  });
</script>

[jinch]

@m-lamarre - thanks for that solution. I just found the same issue on Android and this helped work around it. For me - i was able to scroll (using v6.3.1) ~ even with data-content-scroll=''false" however I found that if I set data-transition="overlap" the scrolling would stop when you reached the bottom of the off-canvas menu and you would not be able to scroll back up. This may have been addressed in another patch since that release but it sounds like there are still some bugs with this.

[bsurai]

I found that if I set data-transition="overlap" the scrolling would stop when you reached the bottom of the off-canvas menu and you would not be able to scroll back up. This may have been addressed in another patch since that release but it sounds like there are still some bugs with this.

@jinch @kball Have you got a solution for this issue? I see that issue with Chrome on Android.

[DanielRuf]

Please try Foundation 6.6.3. 6.3 is very old and we have resolved many issues since then.