Menu icon Foundation
Why would only Chrome show a flash of my Mobile Only Top-Bar Menu when loading the page?

Hello,

 

In Firefox this problem does not happen. In Chrome, for some reason my small and medium Top-bar flashes for a second when loading the page. I am working the site on a usb drive but I doubt that matters. Any thoughts on what would cause this? Thank you!

top-barbrowserchromehtml

Hello,

 

In Firefox this problem does not happen. In Chrome, for some reason my small and medium Top-bar flashes for a second when loading the page. I am working the site on a usb drive but I doubt that matters. Any thoughts on what would cause this? Thank you!

Ryan Patterson 11 days ago

This is a pretty common issue and is known as FOUC or flash of unstyled content. As you may know, the JS is one of the last things to load (right before the closing body tag), because it blocks other elements from loading until it's complete. Otherwise, it would appear that the page is taking longer to load. The JS is what is triggering those elements to be hidden on given screen sizes. 

Zurb provides workarounds for FOUC. Usually you can fix by adding a couple lines of SASS/CSS to explicitly hide when the page loads. Because CSS loads in the head, it will apply those styles before the html of the top-bar is loaded. 

You can see an example of their workaround at https://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc . This might help you out, if FOUC is the issue. However, can't speak to why is only happening on Chrome. I'm not familiar with the intricacies of each browser.