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?
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!
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.
