Dropdown Menu "Flashing" with Responsive Menu

[JeremyEnglert]

Use data-dropdown-menu works great. However, when using something like data-responsive-menu="accordion medium-dropdown", the menu flashes.

[gakimball]

Can you see if this CSS does the trick?

.no-js [data-responsive-menu] ul {
  display: none;
}

[cybernexus]

I have the same issue occurring in my local project and I have noticed the following.

In order for the css to work a no-js class has to be added to the html tag, this is not happening by default and I don't think the documentation discusses this?

Once the class is added, the css you have supplied resolves it.

I also needed to add the following to stop the title bar from flashing.

.no-js [data-responsive-toggle]{
    display:none;
}

[tsquez]

How do you add the no-js class to the html tag?

I added

.no-js [data-responsive-menu] ul {
  display: none;
}

but the flashing is still present.

[JeremyEnglert]

Hmmm. For some reason, I'm no longer experiencing this issue. I updated to 6.0.4 and the issue went away (I had originally updated, but forgot to compile).

[tsquez]

I'm using 6.0.5 and I still see the issue. Do you have any idea how you add the .no-js class to the menu (as per my previous comment)?

I have the navigation in place and styled. Next up is the off canvas menu :smile:

[cybernexus]

The .no-js class should be added to the html tag as a static tag. Foundation will remove it during its initialization. It would appear that the tags intent is for progressive enhancement. If you look at the basic starter template the html file will show you how.

[tsquez]

@cybernexus - Thanks for the reply and I understand that completely. My issue is I do not know where to add the .no-js class. Can you point me in the right direction possibly?

[JeremyEnglert]

@tsquez you add it directly to the HTML element in the header.

Check out how it's setup on Joints here: https://github.com/JeremyEnglert/JointsWP/blob/master/header.php

[tsquez]

Hmmm, thats funny, its already in the html element and still none of the css provided above is working. Strange.

[SalahAdDin]

:+1:

[JeremyEnglert]

Alright. For some reason, this issue came back. Using 6.0.5.

I used the code from @gakimball and the issue went away.

[tsquez]

I wonder why the code from @gakimball isn't working on WP-Forge? Has me scratching my head...Lol

via my phone On Dec 12, 2015 4:33 PM, "Jeremy Englert" notifications@github.com wrote:

Alright. For some reason, this issue came back. Using 6.0.5.

I used the code from @gakimball https://github.com/gakimball and the issue went away.

— Reply to this email directly or view it on GitHub https://github.com/zurb/foundation-sites/issues/7252#issuecomment-164201826 .

[gakimball]

@JeremyEnglert Does the code I posted work as a catch-all solution, regardless of the menu type?

[JeremyEnglert]

@gakimball - it looks like it's working across all menu types except "title-bar". But that's probably a different issue.

The title-bar briefly flashes - see attached GIF.

[gakimball]

@JeremyEnglert Yep, you get a flash with the Responsive Toggler plugin as well. I proposed a solution in #7083, although it's sort of a difficult issue to cleanly solve.

[ErykJaroszewicz]

Thanx to cybernexus for the code to stop flashing of title bar. Applied - solved!

[michaelrinderle]

Why is this closed??? You have FOUC happening even on your F6-Templates

Refresh a couple times and you get major FOUC.

Not to be a dick since you offer this framework for free but this is unacceptable for a css/js framework and I couldn't put something like this out in the wild. It looks terrible.

None of the solutions work anymore with the most recent version and not having a responsive menu, I almost feel like parting ways with F6 for other options. I don't want to since I love foundation but this is a major deal breaker.

[JeremyEnglert]

There is information in the docs on how to get rid of the FOUC.

[michaelrinderle]

If you can make your own templates not produce FOUC, maybe I'd believe you on that. i've tried everything so unless its a glitch with chromium, firefox and android webview...

[JeremyEnglert]

Only trying to help out 👍🏼

Do you have a link I can check out?

[michaelrinderle]

same here, i love foundation and don't want to switch after taking the time to learn the framework. other than this i love it. just take a look at the templates uploaded on the site for instance, like here. you'll have to refresh a couple times since all links on the template are null but you'll see the flash ... with a black title-bar, it's obvious.

[N3los]

Hey,

i tryed all the possible answers found and nothing helps. My problem is i get flashes of dropdowns cause i use off canvas for mobile.

Anyone knows how to fix this?

Ty!

[designerno1]

can you all with problems please post example codes or pens?

[michaelrinderle]

Just check a majority of the templates hit refresh a couple times and you'll see it.

[designerno1]

@ainsophical don't know exactly but the templates seems to be an older version var FOUNDATION_VERSION = '6.0.0'; and in the css file i found nothing to no-js maybe thats the problem i check the template with a 6.2.1 local

[designerno1]

@ainsophical ok i checked the template agains a newer version and then i got no flicker the only flicker i see is the alt text from the loading images ;-) so please update your Foundation Version

[michaelrinderle]

var FOUNDATION_VERSION = '6.2.0';

so far... seems to be corrected in 6.2.1. after update i havent seen a flash on mobile yet.

[N3los]

I was still having a problem on desktop with dropdowns flashing, i updated to 6.2.1 and it still flashed. Then i just added:

[data-responsive-menu] ul { display: none; }

It does not flash anymore.

[daren8888]

I still have the same issue with the drop down menu flashing! Please help! www.sanjoselearningcenter.com.

I added [data-responsive-menu] ul { display: none; } AND tried adding .no-js class... but just like the Dec 11th 2015 comment from tsquez, it's not REAL clear where to add this tag.

can anyone help?

[rafibomb]

@daren8888 Looks like the fix is in 6.2.1. You can update by running npm update in the project. The package.json file has the version number you are on.

[jinch]

Still not fixed... menu top-bar is still flashing 6.2.1 / the .no-js solution did not work for me either. Nothing but bad experience with F6 'ainsophical' hit the nail on the head. This frame work does not seam stable.

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / Scratch... turned out to be user error - i was loading (modernizr.js) for another issue I was having but it turned out I did not need. Once I removed modernizr the (.no-js) hack worked and the top-bar stoped flashing on the initial load. ~ I patched things up and sorta like foundation again... until the next issue ;)

[daren8888]

what's your site?

On Fri, May 20, 2016 at 10:34 AM, jinch notifications@github.com wrote:

Still not fixed... menu top-bar is still flashing 6.2.1 / the .no-js solution did not work for me either. Nothing but bad experience with F6 'ainsophical' hit the nail on the head. This frame work does not seam stable.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/zurb/foundation-sites/issues/7252#issuecomment-220669480

Thank you!

Daren Barry President

Web 4U Inc PO Box 698 Capitola, CA 95010

(831) 854-2201 Office (831) 607-8888 Cell

www.web4uinc.com Web 4U Inc helps small to medium sized businesses use their website to grow, save money, and increase profits. We combine excellent customer service from start to finish with creative design and the latest and greatest practical user-friendly technology. As a full service web design firm, we offer a variety of online services and specialize in new website design, implementing eCommerce solutions, designing mobile friendly websites, and more. Need maintenance on your site? No problem. We're here for you!

[jinch]

Hi Daren, the problem turned out to be (modernizr.js) that I had loaded and is no longer needed for F6. Once i removed that, the .nojs hack fixed the issue.

[daren8888]

Roger that! Ya I have to say the docs (what's required for F5 vs F6) aren't really clear.... And why can't they stick all the JS in one file???? And... Label it F6.0.5 or F6.1.x or F6.2.1?

Sent from my iPhone

On May 24, 2016, at 6:32 PM, jinch notifications@github.com wrote:

Hi Daren, the problem turned out to be (modernizr.js) witch is no longer needed in F6. Once i removed the .nojs hack worked for me.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/zurb/foundation-sites/issues/7252#issuecomment-221450008

[darrensapalo]

Removing modernizr.js fixed the desktop FOUC, and using the css styling code below fixed the responsive FOUC for me. Thanks @jinch !

.title-bar {    
    @include breakpoint(medium) {
        display: none;
    }
}

.top-bar {
    display: none;

    @include breakpoint(medium) {
        display: block;
    }
}

[SalahAdDin]

@darrensapalo Was a modernizr problem?

[reeslo]

I confirm the issue appear when modernizr present !

[phifa]

[data-dropdown-menu] ul {
  display: none;
}

I had the same issue, without modernizr. Fresh 6 install. But this fix makes the flashing go away for my dropdowns. This should be added to the core.

[daren8888]

So I've figured out how to add a "custom" break-point... HOWEVER, I'm still seeing the FLASH (the forum refers to it as FOUC) on Firefox. Any thoughts on this?

www.switch.web4uinc.com/

A previous post said to upgrade from 6.0.5 to 6.2.1 ( I did that ), in fact I tried 6.2.1, 6.2.3, 6.2.4

what's the CURE to the flash? The flash even happens in Chrome when using jquery-2.2.2. I've upgraded to jquery-2.2.4 - which eliminates the flash in chrome... but how do I eliminate it in Firefox as well?

[MildTomato]

why is this issue closed?

[daren8888]

@MildTomato I agree 100%! FOUC is still an issue! Granted FireFox is the worst offender, but it happens in all PC browsers - it's worse with menus that have drop downs. But's it's still visible in sites w/o drop downs.

www.web4uinc.com ( no drop down ) www.thealignmentcenter.com ( with drop down )

[michaelrinderle]

@MildTomato @daren8888

the fact that this has not been rectified in over a year and passed off as a non-issue by zurb developers (at least when I tried getting a solution from them last april) is one of the biggest reason I stopped developing mobile apps in html and went straight to c#/xamarin.

i know this framework is free but it's simply unacceptable for production...

[tsquez]

I agree, still a major issue and needs to be corrected

[daren8888]

@ainsophical @MildTomato @tsquez I agree - There seems to be no Cure for FOUC at this point ( while using Foundation ). I'm about to go back to Bootstrap. It's been over 20 months and like @ainsophical said - it's just passed off as a non-issue -

Ya - try telling your client - oh - just forget about the noise in your new shiny car, that's how they come these days - Ya - NOT!

[SalahAdDin]

I think the same, still is a major issue.

[jinch]

Hmmmm - Personally I'm not experiencing this since the above fix worked for my specific issue. Of course, things are never as clear cut as that seeing many factors are unique to a particular build.

It may be worth a separate post outlining the issue you are facing with supporting examples that may help pin point the problem.

Are you using the latest 6.3 release?

[daren8888]

@jinch would you mind sharing a link so I can see it work properly? I'm not using 6.3.1 in ALL my sites, but I'm using it in www.web4uinc.com and www.thealignmentcenter.com

[jinch]

Hi Daren - you can see on the kitchen-sinks examples (http://foundation.zurb.com/sites/docs/kitchen-sink.html) its working without FOUC issues. I can't share the personal site example as that has been handed off to a backend developer and is not ready for public view.

The examples you shared though I do not see FOUC issues on this end viewing in Firefox v52.1.1. What browser are you seeing the problem?

[daren8888]

Hi jinch - I see the issue in IE, FF, Chrome, Safari - PC Win 7

[jinch]

Ok, that helps narrow it down. I'm on a mac so I can't see the issue without running a windows emulator so I will have to take your word. I did check my site before launch in an emulator on those browsers and did not see any FOUC problems. Can you confirm if this is a MAC / PC thing? What version browsers are you experiencing the issue? Foundation should work smoothly with the exception of IE8 down. (http://foundation.zurb.com/sites/docs/compatibility.html)