Three Issues - Extra Scrollbar, Overlapping Content and Visible Content in Chrome/Opera

[LDigital84]

I have a sidebar on a site that I am developing. Typically this sidebar contains content related to the site. Occasionally, I need to add additional content to the sidebar and this is where flip comes in.

In stead of having one very long sidebar, I have a back and front sidebar. It was working okay (using v1 of Flip) but then I upgraded my site from the Foundation Framework v5.5.3 to v6.1.1 and switched to a Flexbox layout. This is when I started having issues. I also made other changes so the issues I ran into may not be related to Foundation.

There are three issues I see.

1) The "back" sidebar is long. Both sides of the sidebar show an extra scrollbar. Sometimes the scrollbar will disappear but after you flip it a couple times they will appear (this behavior depends upon the browser).

2) When I flip it to the back, which is the long sidebar, it doesn't expand the container to fill the sidebar. Instead it just overlaps the content in the footer.

3) The third issue I believe is related to Issue #53. When viewing the front, portions of the .back are showing through. I'm seeing icons (I am using Fort Awesome (previously Font Icons) which is by the same guy being Font Awesome) but also seeing text. In addition to that, I have progress bars that are showing through (progress bars are part of Foundation Framework v6.1.1 and if you do not see progress bars, cast a vote in Question of the Week to get the progress bars to show).

I've test these three issues in the following browsers:

• Firefox v44
• IE v11
• Edge v25 (aka v13)
• Chrome v47
• Opera v34
• Safari v7 (my Safari isn't up-to-date on my mac)
• Safari v9 (on iPad)

Number 1 happens on all browsers excluding browsers on a mac or touch devices where scrollbars are not typically seen.

Number 2 happens in all browsers.

Number 3 happens in Chrome and Opera but the other browsers are okay.

Here is a link to see a test page that shows the problem. To flip the sidebar click the "More" button at the top of it.

Note: I'm using v1.0.19 of the JS. I did try v1.0.15 per #53 but that didn't make a difference.

[LDigital84]

Anyone have any thoughts on this issue?

[dchatry]

For your 3rd issue, can you try putting a white background on your aside element ?

[chapeti]

No news for bug 3 ?

[jlrida]

For issue #3, try using: $(".back").css('z-index', '0');