Relatively new to webflow and been building my agency site over the last few weeks, really enjoyed using webflow, but the more complex the site gets the more bugs seem to pop up!
My WORK page looks great in Chrome and behaves as expected when resizing the screen, although in Safari the same is very much NOT true
Operating on: OSX Yosemite 10.10.05 and Safari version 10.
If anyone has any suggestions of a fix or a way around I would be super grateful! Worst comes to worst is there a way I could redirect Safari uses to an alternative page design?
So, there is an issue with Flexbox and Safari. The last item of the first line goes to the line⌠Weâre a lot to experience that.
You have nested several Flex elements, so this bug is affecting you multiple times in the galleryâŚ
What to do.
If you canât not use flexbox for it, you can try something, redo the gallery from scratch, using different classnames, but this time you do it using Webflow in Safari. Not in Chrome. Make it work inSafari and it will continue to work after even if you continue to design in Chrome afterwards.
If this doesnât work come back Sorry i donât have more evident answer to fix it as it is.
I find that using the default Flex Child Setting of âShrink if neededâ creates many issues on Safari. Might I suggest trying out âexpandâ or âdonât shrinkâ settings?
I usually test sites using nested flexbox children on Safari first, figure out any display issues, then it should look good on everything else.
Thank you! And thank you for getting back to me on this.
I will rebuild if the other suggestions donât work. First I will update my Safari Browser, then try the âshrink if neededâ suggestion. Apologies for the slow reply, time difference means Iâm just having breakfast!
As long as you boil em, mash em or stick em in a stew! (Ironically Iâm having a pain au chocolate)âŚ
First experiment reveals that updated Safari has no effect on the WORK page. If I rebuild in Safari is there a preferred use of dimension unit to use? vw, vh, %, px etc.?
Hmmm if I change the Flex Child Setting to EXPAND it breaks the layout in Chrome. Instead I tried changing it to DONT SHRINK, but this doesnât have the desired effect in Safari.
I took a look and it looks like changing your âBâ element in your âWorkâ page to 40vw for desktop resolves the issue in Safari as you can see in this GIF: Screen Recording 2017-02-02...
Looks like it does not affect the Chrome variation, Iâm still looking into whether this is a Bug or expected behavior.