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?
Live link: http://bj-provisions.webflow.io/lookbook
Webflow link: https://preview.webflow.com/preview/bj-provisions?preview=e49901537eeeab87899e0fab4a899b9e
Thanks!
Awesome! I just realized that I haven’t updated Safari or Firefox lately. I’ll try that and see if it has any effect.
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.
What browser version and OS are you using? Here’s the flexbox compatibility chart Can I use... Support tables for HTML5, CSS3, etc
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.
Is that 10.1? Because it seems that 10.0 and earlier had some bugs https://github.com/philipwalton/flexbugs/blob/master/README.md
Yeah. I have 10.1.2 installed. I upgraded yesterday from 9 though. The problems were present in both versions.
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:
New Page
http://brynnjames.com/lookbook
Old Page
http://brynnjames.com/lookbook-old
Did you try changing the gallery item min-height to be regular height instead?
Such as:
min-height:300px;
to
height:300px;
Not sure if that will make a difference, but I know that Safari has issues with flexbox and min-height.
Or it could be the 100% height for the embed causing problems. I honestly couldn’t tell you.
Glad you were able to find another solution (even if it required you to spend all that time making tons of lightboxes).
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
