Error/bug on Firefox

[energidesign (Steve)]

Hi all,

Slowly wrapping up a site and today viewed the site on Firefox for the first time… and am experiencing a big error on a page.

https://preview.webflow.com/preview/next-level-bikeshop?preview=587a2fdb92fa8e605f95af9c2e3dca4a

On the Bikes page, in Safari and Chrome and as expected, as you scroll down you can see the main 6 bike panels (Road, MTB, etc). But on FF, those panels are simply not there. They are in the published source code, but I have no idea why they would not show. There are no loading actions or fade-in animations happening.

The only thing it might be (and I hope to goodness it’s not) is that the interactions are legacy and not 2.0, as this site was begun late last year and is still in progress. Given the large amount of microinteractions and animations in here, if the legacy ones have to be re-done to ensure functionality, this is going to be quite the headache.

Either way, just wondering if anyone can shed any light on why these panels aren’t rendering in FF, despite showing up in the source code?

Thank you

[aaronocampo]

Hello @energidesign

Firefox is not a browser supported browser for the designer at this moment:

You can take a look at this article:

philipwalton/flexbugs

[Brando (Brandon Roche)]

Hi @energidesign

Thanks for posting about this issue.

This is actually that same dang known bug with FF as this one: Proportional images not working in Firefox

Basically, if you have a child of a flex container using % based margin / padding, it will not render correctly on FF (see above post for reference).

In this case, you have some % based padding on the flex children here:

Until Firefox resolves that bug you may consider using vh or px based padding. Alternatively you can build out this section layout without flexbox.

Hope this helps!

[energidesign (Steve)]

Hey Brando,

Almost as soon as I sent it, I realised it was this same blasted issue… such a shame! I am playing now with using absolute-positioned images within the container, as their dimensions will at least force the div to retain its proportions. A little frustrating when one is near the end and has to take a few steps backwards because of a browser bug. Oh well!

Thanks again sir, appreciate the reminder

Steve

energi.design

Steve HolmesCreative Director

[Brando (Brandon Roche)]

Definitely can understand the frustration there! And my pleasure to help. I hope you can find an alternative layout solution

[energidesign (Steve)]

Hey Brando,

Found the solution — setting the div width to vw and the height ALSO to vw. So if a 16:9 ratio is needed, and the width of the div(s) are 50vw, then the height can be 28vw. If square, and divs are 25vw then height also 25vw, etc.

Works (and scales) exactly as expected across all browsers.

Thought I’d share, in case anyone else needs a solution to this problem.

Steve

[Brando (Brandon Roche)]

That’s awesome! Thanks for sharing @energidesign