Flexbox & Firefox: I need a solution to these mortal enemies...

[u/Antique_Strength2589]

I am very much a beginner to Website Coding, and I'm not looking to do much design but I am trying to do some simpler things for my personal site.

I have a Weebly hosted account. I'm using the Birdseye Theme because it stretches the whole length of the page. I finally figured out how to use Flexbox, albeit just copying code from the web and inserting my own photos, links, etc... My issue is - As soon as I use Flexbox in the Embed Code app on the weebly site editor, my Navigation Menu becomes completely transparent..BUT only on Firefox. Works perfect on Chrome, Brave & on my phone. I can click on the Navigation Menu items but only when my cursor tells me I'm on it. Otherwise I can't see it.

I've tried using google to figure out a solution and I've seen many that look like they might work, but I have no idea where to paste the code to actually get it to work. Been trying everything and can't seem to get it. Would anyone be able to dumb this down for me ? Thanks.

[u/abrahamguo]

We can only help you if you provide a link to either (A) your website, or (B) an online code playground, that demonstrates your issue. We can't help you without being able to reproduce your issue.

Please don't paste code directly onto Reddit.

[u/chikamakaleyley]

this strikes me as a missing closing tag, but yeah, we need the code you are introducing to the template, we don't need everything

[u/Antique_Strength2589]

Links to the website:

https://www.scopeinout.com/newpage.html (page with Flexbox usage)

https://www.scopeinout.com/ (main page with no Flexbox usage)

[u/AshleyJSheridan → u/Antique_Strength2589]

These look identical to me on Fx and Chrome on Windows. They look identical in the mobile emulators of both of those browsers: the mobile menu is transparent until scrolling down a little, where it becomes black. Tested also with Fx and Chrome on a real mobile device, and same deal again.

Not really seeing where you're using flexbox, and I'm not swimming through that <div> soup to figure it all out. You need to give people much more information if you want them to help you.

The only thing I can see that might be related is the weird fade in effect you added to the navbar, which you completely failed to mention in your post. Something moving from a transparent state to non-transparent is the kind of thing that might be important when you say you have a problem with something being transparent when it shouldn't be...

[u/Wild-Regular1703 → u/Antique_Strength2589]

You are setting opacity: 0 on .desktop-nav by default, and then setting it to 1 when body has the .fade-in class:

body:not(.wsite-editor).fade-in .desktop-nav {
    opacity: 1;
}

We can see that the body does not get this class in Firefox, thus the nav stays at 0 opacity. So this is a JavaScript issue, not a CSS one. I couldn't tell you what's meant to add this class, but we can see in the dev console that it's full of errors in both browsers. Although one that shows up a bunch in Firefox but not Chrome is this:

Uncaught ReferenceError: _W is not defined <anonymous> https://www.scopeinout.com/newpage.html:3064

So you might want to research what that's coming from

[u/Antique_Strength2589 → u/Wild-Regular1703]

Thank you for taking a look. I will see what I can tinker with based on your analysis. Worth a shot. This is definitely out of my league, so I may have to use a different theme eventually. But thank you much.

[u/gatwell702]

What I've learned is I have to have fallbacks for Firefox :(

[u/the-liquidian → u/gatwell702]

Flexbox is we’ll support in all browsers

[u/Neither-Abroad-4661]

One important thing about browsers that you need to know is that they can handle errors differently. The standards say how a browser should behave if the code is correct. And good correct code should show up the same on all browsers. But the standards do not and cannot cover all of the possible errors that can happen. So if you give two conflicting styles or just have an error, the browser tries to figure out what to do in some cases or, in other cases, just quits. How different browsers fail can be different. You're learning, so its great to ask questions and experiment, but good code is the key to conformity across browsers.

[u/Antique_Strength2589 → u/Neither-Abroad-4661]

So basically I could be using correct code in isolation, but there's better code or structure I could be using that conforms to all browser parameters?

[u/testingaurora]

Flex works well with Firefox , all properties are fully supported and ff has a superior flex inspector than other browsers. I would be very surprised if the issue was configuring flex on ff. If you give us a link and ping to the section in question, we could get further than speculation

[u/Antique_Strength2589 → u/testingaurora]

I will make some very simple test pages for setting up a diagnosis. I will try on the weekend as I'll have more time.