I’m implementing this on a new site I’m working on and it’s working great on Chrome! Sadly, on Safari and Firefox, the layout is breaking pretty badly. Anyone have any ideas why?
Well, updating Firefox helped but updating Safari didn’t do anything. Although, there are probably plenty of people who have slightly outdated browsers so I’m wondering if I want to keep using the script unless there’s a workaround for older versions.
I’m thinking it must be an issue with the script rather than flexbox. The older version of Firefox was 38.0.5 for Mac, (though applying a max width of 300px to the embed code helped the giant photo issue Firefox was having), and Safari is 9.1.2.
I doubt it’s the Embed Block inside each collection item - it’s just a div when published. It shouldn’t be the script within the Embed Block either - script tags are hidden by the browser (display:none) and won’t mess up your layout.
It would most likely just be browsers on Mac that implemented flexbox poorly - but without one to test on I am unable to help you further.
It’s certainly strange. I’ve got the most recent version of Safari running now and I’m experiencing the same problems. Unless they completely botched their implementation of flexbox, I’m guessing there’s another problem somewhere.
A brief update. I was unable to get the original design to work so I changed course and redesigned the page without the lightboxes. And removing the lightbox/script elements removed the problems I was experiencing in Safari and Firefox. Here are the two pages as they exist now: