Foundation-sites: Off-Canvas Overlay Issues

[KnightYoshi]

So I encountered an issue while using off-canvas, where the overlay when off-canvas is open does not appear.

If you scale from large or medium down to small and click the navigation icon the off-canvas will open, but the overlay used to close it when clicked/tapped is missing. I've tested and was able to reproduce this with consistency in Firefox, FF Dev, and Chrome.
https://codepen.io/KnightYoshi/pen/YrZWoQ/

Here's an animated GIF of what I'm talking about.

After I resize the window to be medium/large and reload it to reset the page and then scale it down the the off-canvas overlay is missing.

[rafibomb]

Hmm, it seems to be your specific setup. It works a regular off-canvas as expected. https://codepen.io/rafibomb/pen/rGyXaB

The overlay is based on the <div class="off-canvas-content" data-off-canvas-content> which appears to be missing

[KnightYoshi]

No, it's not my set up.
I did forget the .off-canvas-content in my example
I added it:
https://codepen.io/KnightYoshi/pen/YrZWoQ

Still behaves the same.

[KnightYoshi]

[KnightYoshi]

And it always happens when sizing down the window to small. If it starts off as small it works fine.

[KnightYoshi]

This is still an issue that has not been acknowledged.

[bonovski]

Encountered the same issue.
I'm using an off-canvas which is going in-canvas on large.

The overlay isn't triggered when going from large to small, it works OK in the opposite direction.

So if you open the page on desktop size, you won't get the overlay when resizing to small.

[DanielRuf]

Encountered the same issue.
I'm using an off-canvas which is going in-canvas on large.

The overlay isn't triggered when going from large to small, it works OK in the opposite direction.

So if you open the page on desktop size, you won't get the overlay when resizing to small.

Hi, thanks for the report.

Can you provide a working codepen which reproduces this?

[KnightYoshi]

@DanielRuf Looks like I inadvertently deleted the CodePen demonstrating this. The issue still exists in a project I worked https://gaiatools.com/ scaling down from desktop to the mobile view and then opening the menu doesn't trigger the overlay. I've tested this in both Chrome and Firefox. That site currently uses 6.4.x, but I've also tested this with 6.5 and the problem is still present.

[DanielRuf]

Would be great to have an actual Codepen.

[KnightYoshi]

@DanielRuf Here you go https://codepen.io/KnightYoshi/pen/yQpbGv
Scale down to show the menu that opens the off-canvas, you'll see that the overlay doesn't appear. If you refresh the page with it already small it and open it, then the overlay appears as expected.

[DanielRuf]

in-canvas-for-medium seems to be problematic as this will not directly create the placeholder div.

See https://codepen.io/DanielRuf/pen/yQpoPY

[DanielRuf]

Well seems checkInCanvasis currently not in 650 and previous releases.

https://github.com/zurb/foundation-sites/blob/develop/js/foundation.offcanvas.js#L210

https://github.com/zurb/foundation-sites/blob/develop-v6.5/js/foundation.offcanvas.js

@ncoden is this usecase fixed in develop?

[DanielRuf]

cc @SassNinja

https://github.com/zurb/foundation-sites/commit/a241413e0ba32d4a10cbeda0c4ec0fa7080672e6

[bonovski]

Yes, the placeholder <div class="js-off-canvas-overlay is-overlay-fixed "></div> is not created when starting on desktop.
Also for in-canvas-for-large.

[ncoden]

is this usecase fixed in develop?

@DanielRuf I just tested locally, it is not.

[ncoden]

After some tests, I found the following:

When in-canvas-for-medium is used and on desktop, the element is found as in static position (see L112), so OffCanvas will try to add the overflay in the content instead of next to the overlay, but no content was found (see L118). Content should be here the closest [data-off-canvas-content] element.

@KnightYoshi You forgot to put your page content in the [data-off-canvas-content] element. See https://codepen.io/ncoden/pen/bQaoXR.

[DanielRuf]

Content should be here the closest [data-off-canvas-content] elemen

This too but here we have some behavior that we do not have without the in-canvas classes.
Should we catch this or make it more clear that content should be here the closest [data-off-canvas-content] element?

[ncoden]

This too but here we have some behavior that we do not have without the in-canvas classes.

The in-canvas class change the position of the element so change the way the overlay will be added. IMHO [data-off-canvas-content] is still required, the bug is just less obvious without in-canvas.

We should throw an error because [data-off-canvas-content] is not found.

[DanielRuf]

We should throw an error because [data-off-canvas-content] is not found.

Makes sense. But so far which components do this if something is missing?
If so we should do these type of checks and error throwing in more.

[bonovski]

Since I only use data-transition="overlap" I don't use <div class="off-canvas-content" data-off-canvas-content>. The "regular" off-canvas overlays work fine, the issue appears only once I add in-canvas-for-medium/large.
And even if I do add <div class="off-canvas-content" data-off-canvas-content> , the overlay covers only the height of the in-canvas div and not the whole viewport.

[DanielRuf]

Hi @bonovski, can you for your usecase provide a working codepen or multiple codepens? Because this is a different one.

[SassNinja]

IMHO [data-off-canvas-content] is still required – @ncoden

Exactly! You can't just use half of a plugin and expect it to work without problems. The docs mention nowhere [data-off-canvas-content] is optional!

But so far which components do this if something is missing?
If so we should do these type of checks and error throwing in more. – @DanielRuf

Agree, if we do error checks we should do it for other plugins as well.
However I somehow expect people to follow the docs (and don't leave out some parts) unless they dig deeper and know what they're doing...

[bonovski]

@SassNinja

https://codepen.io/bonovski/pen/NEwepQ

I added [data-off-canvas-content] and the overlay appears when I start viewing it on large.
However the overlay is still wrong (covers only the in-canvas div).
It gets absolute positioning
<div class="js-off-canvas-overlay is-overlay-absolute"></div>

instead of fixed
<div class="js-off-canvas-overlay is-overlay-fixed"></div>

like all other "regular off-canvas elements, which BTW work perfectly fine without [data-off-canvas-content] , just saying ... ;)

Going the other way, starting from mobile and enlarging to desktop works without problems.

[ncoden]

@DanielRuf @SassNinja See #11603 (it resolves this issue but is still in progress).

[ncoden]

@KnightYoshi So it seems not to be a bug but a misusage of the component. Please use the template given in the documentation :)

@bonovski You are right, this seems to comes from the "wrong" layer position. I'll investigate this but this is an other issue. Could you open a new issue so we can track it better?

[credwards27]

I can also confirm that this is a bug, and that the template provided in the documentation causes broken behavior:

Broken: The documentation template describes the following setup:

<div id="my-off-canvas-wrapper" class="off-canvas-wrapper">

    <div id="my-off-canvas-element" class="off-canvas in-canvas-for-large position-left" data-content-scroll="false" data-off-canvas>
        <!-- Off-canvas content -->
    </div>

    <div class="off-canvas-content" data-off-canvas-content>
        <!-- Off-canvas content for overlay -->
    </div>

</div>

Working:

<div id="my-off-canvas-wrapper" class="off-canvas-wrapper">

    <div id="my-off-canvas-element" class="off-canvas in-canvas-for-large position-left" data-content-scroll="false" data-off-canvas>
        <!-- Off-canvas content -->
    </div>

    <div data-off-canvas-content>
        <!-- Off-canvas content for overlay -->
    </div>

</div>

The issue seems to be caused by class="off-canvas-content" on the off-canvas content element.

Removing the class fixes the issue, as illustrated by the code in the second example.

[DanielRuf]

But the class should be required, also for styling.

Can you check that and create a reproducible testcase as codepen?

[KnightYoshi]

@DanielRuf You can use the Codepen that Rafi created and replicate the issue

I also forked his and changed Foundation version to the most recent 6.5.3
https://codepen.io/KnightYoshi/pen/xxxZKPL

I've demonstrated it with the fork of Rafi's

When a page loads and is scaled down, the overlay is not injected.
When the page loads on small, the overlay is injected. If the page width increases and decreases again, it behaves as normal.

I believe this is because it's not responding to view port width changes, but instead checks when the component is initialized.