Foundation-sites: Off-canvas position top bug

[karimramadan]

In an off canvas with a position 'top' if the content inside the off canvas is taller than 250px the bottom border (.position-top.is-transition-push::after) is floating over.

[ncoden]

@brettsmason Can you take a look at this ?

[brettsmason]

Yep will do!

[brettsmason]

I've setup a CodePen for this issue: https://codepen.io/brettsmason/pen/VPWeGX
It's an odd one - I'm not sure how we can go about fixing this. @ncoden if you have any thoughts that would be great.

[webdevan]

How bout just removing the :after styling from Foundation all together?

This gradient isn't serving any purpose beyond aesthetics and Foundation has always been very aesthetically un-opinionated (which is great) so I propose just removing the gradient from offcanvas and let users of Foundation add their own CSS gradient (if they want one).

[kball]

I think @webdevan's point is a good one. I believe it was added for backwards compatibility, but at the very least this should be separated out and made optional

[brettsmason]

I would agree with removing the shadow too.

@kball it is optional at the moment - see here: https://github.com/zurb/foundation-sites/blob/develop/scss/components/_off-canvas.scss#L210

However its probably not obvious. I would be happy to remove it all together, which was my plan originally as I thought it was too opinionated.

Let me know what you would like to do and I can make some changes if needed.

[kball]

Lets remove it for 6.4, and add a migration note.

[brettsmason]

@kball I've removed this in my branch and am putting together a PR.
Where do you think would be suitable on the off canvas page to add a migration notice/are there any similar examples?

[kball]

@brettsmason I was actually thinking more a migration note for the release notes... That said, the off-canvas docs page already has a migration section for migrating to 6.3, you could add a note in there as well.

[kball]

@brettsmason did you end up making this change as a PR? I thought I saw it but now I'm not finding it

[SassNinja]

I've fixed this in my PR https://github.com/zurb/foundation-sites/pull/10003, precisely in commit https://github.com/zurb/foundation-sites/pull/10003/commits/0130a3fdec4cc08f1bb236e05386790b157a697f

@brettsmason so there's probably no need to remove the shadow. The only downside is that you have to adjust the new inner shadow values if the default value of $offcanvas-shadow was changed.

But I think that's worth it anyway :)
I've already created the appropriate variables so that's not much work.

[brettsmason]

Looks like this was addressed in the PR above so closing this!